vue-router 重難點總結筆記

1，使用動態路由配置的（如：‘：id’），可以在this.$router.params.id獲得。

　　官網例子：

模式	匹配路徑	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }

　　⚠️注意：當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。

　　　　　　不過，這也意味着組件的生命周期鈎子不會再被調用。此時可以使用：watch監聽$route對象，或者導航守衛beforeRouterUpdate。

2，$router和$route的區別，前者是全局路由對象，后者是當前路由。

3，匹配優先級：誰先定義誰的優先級高。

4，嵌套路由：要注意，以 / 開頭的嵌套路徑會被當作根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。

5，編程式路由：

　　a：路由傳參數：如果提供了 path，params 會被忽略

　   b：router.replace(location, onComplete?, onAbort?)        不會向 history 添加新記錄

　　　router.push(location, onComplete?, onAbort?)            會向 history 添加新記錄

　　　onComplete 導航成功完成的回調

　　　onAbort       導航失敗的回調

6，命名視圖：同個路由多個視圖：如果 router-view 沒有設置名字，那么默認為 default

　　<router-view class="view one"></router-view> 　　<router-view class="view two" name="a"></router-view> 　　<router-view class="view three" name="b"></router-view>

　　const router = new VueR 　　routes: [

 　　 { 　　 path: '/', 　　 components: { 　　 default: Foo, 　　 a: Bar, 　　 b: Baz 　　 }  　　 } 　　 ] 　　})
7，重定向：注意導航守衛並沒有應用在跳轉路由上，而僅僅應用在其目標上。
8，使用 $route，會與組件高度耦合，使用 props 將組件和路由解耦。

const User = {

 props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 對於包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] })
9，導航守衛：

• next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
• next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

10，router.beforeEach 當一個導航觸發時，全局前置守衛按照創建順序調用

　　router.beforeResolve   在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后
11，路由獨享的守衛：在路由配置上直接定義 beforeEnter 守衛：

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
12，beforeRouteEnter 守衛 不能 訪問 this，update，leave可以訪問this。僅僅是beforeRouterEnter支持next傳遞回調。

beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，並且把組件實例作為回調方法的參數。

beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實例 }) }

13， 完整的導航解析流程

1. 導航被觸發。
2. 在失活的組件里調用離開守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置里調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件里調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鈎子。
11. 觸發 DOM 更新。
12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

14，路由元信息

下面例子展示在全局導航守衛中檢查元字段：

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 確保一定要調用 next() } })

 15，vue-router 配合axios攔截器的掃操作 

//http request攔截器
axios.interceptors.request.use(
config =>{
debugger
var token = sessionStorage.getItem('token');
if(token){
// 判斷是否存在token，如果存在的話，則每個http header都加上token
config.headers.Authorization = 'token ${store.state.token}';
}
return config;
},
err =>{
return Promise.reject(err);
}
)

// //http response攔截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息並跳轉到登錄頁面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的錯誤信息
});