1. 必須使用 name 匹配路由例隆，params 傳參 （不可使用 path 匹配路由）
特點(diǎn)：參數(shù)保密，刷新頁面丟失參數(shù)
- 在組件中
this.$router.push({
name: 'group2',
params: {
id: '101'
}
})
或者
<router-link :to="{ name: 'group2', params: { id: 101 }}">首頁</router-link>
- 在目標(biāo)組件獲取參數(shù)
this.paramsId = this.$route.params.id
2. 使用 path或者name 匹配路由，query 傳參
特點(diǎn)：參數(shù)在路徑上顯示空盼，刷新頁面不丟失參數(shù)
- 在組件中
this.$router.push({
path: '/group2/page1',
query: {
id: '201'
}
})
或者
<router-link :to="{ path: '/group2/page1',query: {id: '201'}}">內(nèi)容區(qū)</router-link>
- 在目標(biāo)組件獲取參數(shù)
this.queryId = this.$route.query.id
3. 必須使用 path 匹配路由衰抑，路徑/參數(shù) 傳參 , 同時配置路由對象 路徑/:參數(shù)名
特點(diǎn)：參數(shù)在路徑上顯示，刷新頁面不丟失參數(shù)
- 在組件中
this.$router.push({
path: '/group2/page2/青龍',
})
或者
<router-link :to="{ path: '/group2/page2/青龍'">內(nèi)容區(qū)</router-link>
- 在路由文件中香伴，追加 /:name
{
path: "/group2/page2/:name",
name: "group2page2",
component: () => import("@/views/group2/page2")
}
- 在目標(biāo)組件獲取參數(shù)
this.paramsName = this.$route.params.name
4.使用 name 匹配路由慰枕， props 傳參，適合整合參數(shù)
- 在組件中
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 參數(shù)即纲，刷新頁面丟失具帮，不在路徑上顯示
$route.query 參數(shù)，刷新頁面不丟失低斋，在路徑上顯示
固定參數(shù)蜂厅，刷新頁面不丟失，不在路徑上顯示
{
path: "/",
name: "group2",
component: () => import("@/views/group2/index"),
props($route) {
return {
id: $route.params.id,
queId: $route.query.queId,
other: 1000,
}
}
},
- 在目標(biāo)組件獲取參數(shù)膊畴，此參數(shù)直接通過 this 訪問掘猿，比如 this.id
props: ['id','other','queId'],
5. 跳轉(zhuǎn)無回退歷史
this.$router.replace({
name: "group2page2"
});
6. 歷史回退和前進(jìn)
this.$router.go(-1);
this.$router.go(1);
