当前的需求:
点击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
的变化,改变从路由传递过来的参数值