動(dòng)態(tài)路由
? ? ? ?不同的用戶登陸時(shí)候 userid是不同的绰上，但是都會(huì)進(jìn)入到同一個(gè)主頁呈驶。那么路由中的path就不能寫死郑诺，應(yīng)該根據(jù)用戶id來匹配路由設(shè)置苫耸。
? ? ? ?vue-router中州邢，動(dòng)態(tài)部分以 ：開頭。
? ? ? ?例如導(dǎo)航到user組件：{ path: "/user/:id", component: user}褪子。?下面來嘗試一下
1.app.vue中添加兩個(gè)router-link
<!-- 增加兩個(gè)到user組件的導(dǎo)航量淌，可以看到這里使用了不同的to屬性 -->
<router-link to="/user/123">123</router-link>
<router-link to="/user/456">456</router-link>
2.router.js中添加動(dòng)態(tài)routes
{
/*新增user路徑，配置了動(dòng)態(tài)的id*/
{
path: "/user/:id",
name: "user",
component: user
}
}
3.user組件
<template>
<div>
<h1>User</h1>
<div>我是user組件,動(dòng)態(tài)部分是{{ message }}</div>
</div>
</template>
<script>
export default {
data(){
return {
message:''
}
},
watch:{
$route(to,from){
// to表示的是你要去的那個(gè)組件褐筛，from 表示的是你從哪個(gè)組件過來的，它們是兩個(gè)對(duì)象叙身，你可以把它打印出來渔扎，它們也有一個(gè)param 屬性
console.log(to);
console.log(from);
this.message = to.params.id
}
}
}
</script>
嵌套路由
? ? ? ?進(jìn)入主頁后可能還會(huì)有子分類，點(diǎn)擊去到每個(gè)分類的時(shí)候需要路由導(dǎo)航信轿。 vue提供了 childrens屬性晃痴，也是一組路由相當(dāng)于routes。
? ? ? ?下面嘗試一下：
1.home.vue中添加子類：
<template>
<div>
<h1>home</h1>
<!-- router-link 的to屬性要注意财忽，路由是先進(jìn)入到home,然后才進(jìn)入相應(yīng)的子路由如 fruit,所以書寫時(shí)要把 home 帶上 -->
<p>
<router-link to="/home/fruit">水果</router-link>
<router-link to="/home/food">食物</router-link>
</p>
<router-view></router-view>
</div>
</template>
2.router.js配置：
{
path:"/home",
// 下面這個(gè)屬性也不少倘核，因?yàn)椋覀兪窍冗M(jìn)入home頁面即彪，才能進(jìn)入子路由
component: home,
// 子路由
children: [
{
path: "fruit",
name: "fruit",
component: fruit
},
{
path: "food",
name: "food",
component: food
},
// 當(dāng)進(jìn)入到home時(shí)紧唱，下面的組件顯示(防止下面顯示了“水果”活尊，但是上面組件卻沒有被選中)
{
path: "",
component: phone
}
]
}
命名路由
? ? ? ?就是上面代碼中的name屬性。就是給路由起了一個(gè)名字漏益。在router-link中to屬性可以使用
<router-link to="/user/123">User123</router-link> // 和下面等價(jià)
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> // 當(dāng)使用對(duì)象作為路由的時(shí)候蛹锰，to前面要加一個(gè)冒號(hào),表示綁定
