1. 動(dòng)態(tài)路由匹配
- 路徑參數(shù)以 : 標(biāo)記奥此,參數(shù)值會(huì)被設(shè)置到this.$route.params。
- 使用路由參數(shù)个唧,例如:‘/user/foo’到‘/user/bar’攘乒,組件實(shí)例會(huì)被復(fù)用,需要watch監(jiān)聽$route對(duì)象。
- to.name 匹配的是路由的name值王暗。
watch: {
'$route' (to, from) {
if (to.name == 'detail') {
this.params= this.$route.params
this.getActivityDetail();
}
}
}
2.編程式導(dǎo)航
字符串:router.push('home');
對(duì)象:router.push({path:'home'})
命名路由:router.push({name:'user',params:124})
帶查詢字符串:router.push({path:'login',query:{userId:1,userName:2}})
帶params參數(shù): let userId=123; router.push({path:'/user/${userId}'})
3. 命名視圖
- 同路由榨乎,多視圖,需要多個(gè)組件瘫筐,使用components屬性蜜暑。
- 使用name屬性命名,沒有默認(rèn)為default策肝。
<router-view name="a"></router-view>
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
4. 重定向別名
- 重定向:當(dāng)訪問'/a'時(shí)候肛捍,url 被替換成 '/b'。
{ path: '/a', redirect: '/b' }
- 別名:/a 的別名是 /b之众,意味著拙毫,當(dāng)用戶訪問 /b 時(shí),URL 會(huì)保持為 /b棺禾,但是路由匹配則為 /a缀蹄。
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者