Vue 切换不同的路由参数使用一个路由

当前的需求:

  点击tab页签中的不同的tab，给router-view组建中传值不同的路由参数，实现在同一个路由中显示不同的数据。

解决方法

• 使用路由的path进行切换
    将当前需要切换的路由的path设置为 '/path/:id', 在tab页中点击不同的tab 改变 id的值，使用 this.$router.push({path: '/path/${id}'})进行路由跳转

  • 路由配置信息：

  • 跳转路由：

使用此方法，url上的参数会进行变化，参数会有/path/id1 改变为 path/id2

• 使用路由的 name进行切换

当使用 name进行切换时，传递的参数不能为params，params在第一次进来时已经被缓存了，并不会触发钩子函数。 使用name进行切换时，当前的url 不会进行改变

  使用name进行切换时，必须使用query的参数，才能给实现路由的变化，随后在子组件中监督$route的变化，改变从路由传递过来的参数值

转载于:https://juejin.im/post/5ae96c69f265da0b93481e5d