vue跳转时路由相同但参数不同

问题
解决

方案一：watch
方案二：beforeRouteUpdate

问题

在开发vue项目中遇到一个问题：两个导航共用一个显示界面，我打算通过路由传参的形式进行区别，利用vue的钩子，调用不同的查询接口：

// 错误示范
this.$router.push({ //导航一
    path: "/logindex",
     name:'logindex',
     params: { logType: 1 }
 });
 
 this.$router.push({ //导航二
    path: "/logindex",
     name:'logindex',
     params: { logType: 2 }
 });

但是我发现在两个导航之前切换时，vue不会重新加载组件，进而无法调用生命周期中的钩子，就导致页面数据无法更新。

解决

方案一：watch

第一步：改造路由

{
    path: '/logindex/:logType',
    name: 'logindex',
    component:()=>import('@/page/Logindex.vue')
}

跳转

this.$router.push({ //导航一
   	path: "logindex:logType",
    name:'logindex',
    params: { logType: 1}
});

this.$router.push({ //导航二
   	path: "logindex:logType",
    name:'logindex',
    params: { logType: 2 }
});

第二步：通过watch监听路由变化

data() {
    return {};
},
watch: {
    '$route':{
        handler(to) {
        	// to：目标路由对象
            this.loading(to.params.logType);//查询数据
        }
    }
},
methods: {}

方案二：beforeRouteUpdate

第一步：同方案一第一步；
第二步：通过路由钩子beforeRouteUpdate监听路由变化

data() {
    return {};
},
beforeRouteUpdate (to, from, next) {
	// to：目标路由对象
	// from：原路由对象
	// next：可指定路由进行跳转
   next();
   this.loading(to.params.logType);//查询数据
   
},
methods: {}

来源：CSDN

作者：卖女孩的小火柴~

链接：https://blog.csdn.net/qq_40847060/article/details/104515364

标签

vue

路由

vue路由