Vue 监听路由变化的三种方式

方法一：通过 watch

// 监听,当路由发生变化的时候执行
watch:{$route(to,from){console.log(to.path);}
},

或

// 监听,当路由发生变化的时候执行
watch: {$route: {handler: function(val, oldVal){console.log(val);},// 深度观察监听deep: true}
},

或

// 监听,当路由发生变化的时候执行
watch: {'$route':'getPath'
},
methods: {getPath(){console.log(this.$route.path);}
}

方法二：：key是用来阻止“复用”的。Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)

<router-view :key="key"></router-view>computed: {key() {return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()}
}

使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

方法三：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

<script>// 引入 Tabbar组件import mTabbar from './components/Tabbar'import mTabbarItem from './components/TabbarItem'// 引入 vuex 的两个方法import {mapGetters, mapActions} from 'vuex'export default {name: 'app',// 计算属性computed:mapGetters([// 从 getters 中获取值'tabbarShow']),// 监听,当路由发生变化的时候执行watch:{$route(to,from){if(to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' || to.path == '/Time' || to.path == '/Mine'){/*** $store来自Store对象* dispatch 向 actions 发起请求*/this.$store.dispatch('showTabBar');}else{this.$store.dispatch('hideTabBar');}}},beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当钩子执行前，组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`},components:{mTabbar,mTabbarItem},data() {return {select:"Building"}}}
</script>

Vue 监听路由变化的三种方式相关推荐

Java实现监听文件变化的三种方法，推荐第三种
背景在研究规则引擎时,如果规则以文件的形式存储,那么就需要监听指定的目录或文件来感知规则是否变化,进而进行加载.当然,在其他业务场景下,比如想实现配置文件的动态加载.日志文件的监听.FTP文件变动监 ...
vue 监听路由变化
一.watch监听$route($router的对象) // 监听,当路由发生变化的时候执行 watch:{$route(to,from){console.log(to.path);} }, ==== ...
vue监听路由的变化，跳转到同一个页面时，Url改变但视图未重新加载问题
vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题解决方法: 添加路由监听,路由改变时执行监听方法 methods:{fetchData(){console.log('路由发送 ...
reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...
Vue路由传参三种方式
Vue路由传参三种方式 params传参路由属性配置传参 query传参一.params传参 this.$router.push({ name:"admin", //这里的pa ...
vue实现input输入模糊查询(三种方式)
vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询演示 ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
Vue项目点击刷新页面的三种方式
Vue项目点击刷新页面的三种方式一.原生js刷新方式: location.reload(); 二.Vue框架自带的路由跳转方式: this.$router.go(0); 三.在App.vue页面声明 ...
前端路由的原生代码实现？前端如何监听路由变化？
前端如何监听路由的变化?如何根据前端路由的变化,去操作相应的DOM? 本文从前端层面上,大致解读一下,前端路由的监听与相关DOM操作的方法. 实现的基本原理: 首先,放置指定的DOM标识, 其次,当锚 ...

Vue 监听路由变化的三种方式

Vue 监听路由变化的三种方式相关推荐

最新文章

热门文章