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 监听路由变化的更多相关文章
- vue监听路由变化
使用 watch,观察路由,一旦发生变化便重新获取数据 watch: { // 如果路由有变化,会再次执行该方法 '$route': 'fetchData' }
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- AngularJS监听路由变化
使用AngularJS时,当路由发生改变时,我们需要做某些处理,此时可以监听路由事件,常用的是$routeStartChange, $routeChangeSuccess.完整例子如下: <!D ...
- Angular 监听路由变化
var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...
- mint ui的tabBar监听路由变化实现tabBar切换
说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...
- angular 全局 监听路由变化
app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...
- Angular 监听路由变化事件
摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toPa ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
- 【转载】AngularJS监听路由变化
一.Angular 路由状态发生改变时可以通过' $stateChangeStart '.' $stateChangeSuccess '.' $stateChangeError '监听,通过注入'$l ...
随机推荐
- 金融量化分析【day111】:Matplotib-画布与子图
一.画布与子图 1.实例 %matplotlib auto fig = plt.figure() ax = fig.add_subplot(2,2,1) ax2 = fig.add_subplot(2 ...
- 如何巧妙的使用ArrayList的Clone方法
一.ArrayList的Clone方法的源码 返回一个Object对象,所以在使用此方法的时候要强制转换. ArrayList的本质是维护了一个Object的数组,所以克隆也是通过数组的复制实现的,属 ...
- 第一次连接数据库mongodb踩的坑
类型匹配错误,参数要写对了,name与age一一对应. 如果没找到错误就把异常打印出来. await person.save(function(err) { if(err) console.log(e ...
- .net异步委托
委托Delegate是一个类,定义了方法的类型, 使得可以将方法当做另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法,可以避免在程序中大佬使用If-Else(Switch)语句,同时使得程序 ...
- Geometric regularity criterion for NSE: the cross product of velocity and vorticity 1: $u\times \om$
在 [Chae, Dongho. On the regularity conditions of suitable weak solutions of the 3D Navier-Stokes equ ...
- babel
一款可以将 ES6 代码转换为 ES5 代码的转译器. 官网:http://babeljs.io/ 中文:https://www.babeljs.cn/
- Python3:递归实现输出目录下所有的文件
今天来整理一下os库中方法的使用,如何输出一个目录下的所有文件? 1.首先介绍几个基本的的方法: 1)os.getcwd() #返回当前工作目录 2)os.listdir() #返回一个列表, ...
- 【ARTS】01_21_左耳听风-201900401~201900407
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- canvas图片合成中的坑
需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...
- nginx优化之keepalive
一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...