vue入門總結（4）
1.路由的模式：
前文中我們建立VueRouter例項時用了mode:history的引數，這個值的意思是使用history模式，這種模式充分利用了history.pushState API來完成URL的跳轉而無須重新載入頁面。
如果不使用history模式，當訪問home的時候地址就會變為：
http://localhost/#home
反之為：http://localhost/home
2.路由與導航：
vue-router提供了兩個指令標籤元件這個導航與自動渲染邏輯：
<router-view>---渲染路徑匹配到的檢視元件，它還可以內嵌自己的<router-view>,根據巢狀路徑渲染巢狀元件。
<router-link>---實現具有路由功能的導航
接下來我們就在App.vue中用這兩個標籤改寫<template></template>的模板內容：
<template>
<ul>
<li>
//使用router-link指向定義的path
<router-link to="/home"><div>Home</div></router-link>
<router-link to="/explorer"><div>Explorer</div></router-link>
<router-link to="/cart"><div>Cart</div></router-link>
<router-link to="/me"><div>Me</div></router-link>
</li>
</ul>
<div>
//用router-view渲染檢視
<router-view></router-view>
</div>
</template>
3.上面的做法有一個缺點，就是如果我把/home改成/homepage或者其他的時候需要在VueRouter全域性配置中更改，以及每一個用到過的地方進行更改，無論我們做的是服務端的開發還是前端開發，路由的使用都有一個明確的原則：不直接引用路由定義。
vue-router提供了一種隱式的路由引用方式，vue-router將之稱為“命名路由”
我們需要在VueRouter的配置上做一些重構：
route.js中的更改
const router = new VueRouter({
mode:'history',
base:__dirname,
router:[
//將頁面元件與path指定的路由關聯
{name:'Home',path:'/home',component:Home},
{name:'Explorer',path:'/explorer',component:Explorer},
{name:'Cart',path:'/cart',component:Cart},
{name:'Me',path:'/me,component:Me}
]
});
App.vue
<template>中的更改
<ul>
<li>
//使用router-link指向定義的path
<router-link to="{name:'Home'}"><div>Home</div></router-link>
<router-link to="{name:'Explorer'}"><div>Explorer</div></router-link>
<router-link to="{name:'Cart'}"><div>Cart</div></router-link>
<router-link to="{name:'Me'}"><div>Me</div></router-link>
</li>
</ul>
<div>
//用router-view渲染檢視
<router-view></router-view>
</div>
</template>
4.動態路由
可以理解為帶引數的路由
比如在route.js中，路由/home要傳遞一個id引數
const router = new VueRouter({
mode:'history',
base:__dirname,
router:[
//將頁面元件與path指定的路由關聯
{name:'Home',path:'/home/:id',component:Home},
{name:'Explorer',path:'/explorer',component:Explorer},
{name:'Cart',path:'/cart',component:Cart},
{name:'Me',path:'/me,component:Me}
]
});
App.vue
<template>中的更改
<ul>
<li>
//使用router-link指向定義的path
<router-link to="{name:'Home',params:{id:1}}"><div>Home</div></router-link>
<router-link to="{name:'Explorer'}"><div>Explorer</div></router-link>
<router-link to="{name:'Cart'}"><div>Cart</div></router-link>
<router-link to="{name:'Me'}"><div>Me</div></router-link>
</li>
</ul>
<div>
//用router-view渲染檢視
<router-view></router-view>
</div>
</template>
5.那在/home中又如何讀取id屬性呢？
export default {
create(){
const bookID = this.$route.params.id.
}
}
6.當使用路由引數時，例如從 /home/1導航 /home/2原來的元件例項會被複用。這也意味著元件的生命週期鉤子不會再被1呼叫，可以通過在watch物件內新增對$route物件變化的追蹤函式:
export default {
create(){
const bookID = this.$route.params.id.
},
watch:{
'$route'(to,from){
//對路由變化做出響應
}
}
}