1. 路由的参数传递问题:
使用路由导航传递参数格式:
this.$router.push({
name: '组件别名',
params: {参数名: 值},
})
接收参数分两步:
在路由中:
path:使用/:参数名 进行拼接,并且多个参数可以在后面直接进行拼接
props: router=>({ 获取参数
参数名: router.params.参数名
})
在组件中:
props:【'参数名'】,
data:参数名
2. 注意,不能在同一页面下使用路由导航进行跳转页面,即使是重定向也不行。
例: 所在页面的路由:
{
path: '/aaaaaa',
redirect: '/aaaaaa/bbbbb',
component: 'aaaaaa',
children:{
path:'/aaaaaa/bbbbb',
component: 'bbbbbb',
}
}
在此页面下进行路由导航:
this.$router.push('/aaaaaa') 或 this.$router.push('/aaaaaa/bbbbbb'),
是不行的,这样的路由导航不会触发。
3. 如果在父组件的页面中,进行子组件的路由导航,子组件是不会调用生命周期函数的,即,没有销毁再创建的过程。
即使传递参数来改变路由也一样,需要通过watch来进行监听路由的变化,具体参考官方文档
例:
{
path: '/aaaaaa',
redirect: '/aaaaaa/bbbbb',
component: 'aaaaaa',
children:
{
path:'/aaaaaa/bbbbb',
component: 'bbbbbb',
},
{
path:'/aaaaaa/cccccc',
component: 'cccccc',
}
}
在父组件页面下进行路由导航:
this.$router.push('/aaaaaa/ccccccc') 到 this.$router.push('/aaaaaa/bbbbbb'),
需要在bbbbbb组件中调用watch函数
watch:{
$route(to,from){
//具体操作bbbbbbb组件的内容
onload(); //此处的函数为异步加载 bbbbbb组件的函数,按需求使用
}
}
关于vue路由的工作笔记(路由传参和url明明跳转但页面不刷新的原因)
最新推荐文章于 2023-06-13 14:24:45 发布