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

您所在的位置：网站首页 › vue组件name和路由name不一致 › vue跳转时路由相同但参数不同

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

2023-08-09 15:43| 来源: 网络整理| 查看: 265

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: {}

【本文地址】

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

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

今日新闻

推荐新闻