1. 必须使用 name 匹配路由,params 传参 (不可使用 path 匹配路由)
特点:参数保密,刷新页面丢失参数
- 在组件中
this.$router.push({
name: 'group2',
params: {
id: '101'
}
})
或者
<router-link :to="{ name: 'group2', params: { id: 101 }}">首页</router-link>
- 在目标组件获取参数
this.paramsId = this.$route.params.id
2. 使用 path或者name 匹配路由,query 传参
特点:参数在路径上显示,刷新页面不丢失参数
- 在组件中
this.$router.push({
path: '/group2/page1',
query: {
id: '201'
}
})
或者
<router-link :to="{ path: '/group2/page1',query: {id: '201'}}">内容区</router-link>
- 在目标组件获取参数
this.queryId = this.$route.query.id
3. 必须使用 path 匹配路由,路径/参数 传参 , 同时配置路由对象 路径/:参数名
特点:参数在路径上显示,刷新页面不丢失参数
- 在组件中
this.$router.push({
path: '/group2/page2/青龙',
})
或者
<router-link :to="{ path: '/group2/page2/青龙'">内容区</router-link>
- 在路由文件中,追加 /:name
{
path: "/group2/page2/:name",
name: "group2page2",
component: () => import("@/views/group2/page2")
}
- 在目标组件获取参数
this.paramsName = this.$route.params.name
4.使用 name 匹配路由, props 传参,适合整合参数
- 在组件中
this.$router.push({
name: 'group2',
params: {
id: '666'
},
query: {
queId: '999'
}
})
或者
<router-link :to="{ name: 'group2', params: { id: '666' },query: {queId: '999'}}">首页</router-link>
- 在路由文件中 配置props
$route.params 参数,刷新页面丢失,不在路径上显示
$route.query 参数,刷新页面不丢失,在路径上显示
固定参数,刷新页面不丢失,不在路径上显示
{
path: "/",
name: "group2",
component: () => import("@/views/group2/index"),
props($route) {
return {
id: $route.params.id,
queId: $route.query.queId,
other: 1000,
}
}
},
- 在目标组件获取参数,此参数直接通过 this 访问,比如 this.id
props: ['id','other','queId'],
5. 跳转无回退历史
this.$router.replace({
name: "group2page2"
});
6. 历史回退和前进
this.$router.go(-1);
this.$router.go(1);
网友评论