[TOC] #### 1. vue-router 介紹 --- Vue-Router 3.x 適用于 Vue2，Vue-Router 4.x 適用于 Vue3 Vue-Router 3.x 官方文檔: <https://router.vuejs.org/zh> vue-router 是 vue 官方的路由插件，它和 vue 是深度集成的，適合用于構建單頁面應用 #### 2. vue-router 的使用 --- 安裝 vue-router ``` npm install vue-router --save ``` 在模塊化工程中使用 （因為它是一個插件，所以可以通過 Vue.use() 來安裝路由功能） 第一步: 導入路由對象，并且調用 Vue.use(VueRouter) 第二步: 創建路由實例，并且傳入路由映射配置，導出路由實例  第三步: 在 vue 實例中掛載創建的路由實例  #### 3. 路由映射配置的寫法 --- 方案一: 導入組件實例 ```javascript import Home from '@/components/Home'; import About from '@/components/About'; const routes = [ { path: '/home', component: Home }, { path: '/about', component: About }, ] ``` #### 4. 路由的默認值、history 模式 --- 剛進入頁面路由是 `/`, 可通過路由重定向實現默認路由 ``` { path: "", redirect: '/home' }, ``` 路由模式默認是 hash 模式，在創建路由實例時只需添加 `mode: 'history'` 即可改為 history 模式 ```javascript const router = new VueRouter({ routes, mode: 'history' }) ``` #### 5. router-link 和 router-view 組件 ---- router-link 組件用于生成路由跳轉鏈接，to 屬性用于指定路由 ``` <router-link to="/home">首頁</router-link> <router-link to="/about">關于</router-link> ``` router-link 組件屬性: tag router-link 組件默認會被渲染成一個 a 標簽，但有些時候我們想要渲染為 li、button 標簽等，此時可以使用 tag 屬性 ``` <router-link to="/home" tag="li">首頁</router-link> <router-link to="/about" tag="button">關于</router-link> ``` router-link 組件屬性: replace 設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，于是導航后不會留下 history 記錄 ``` <router-link to="/home" replace>首頁</router-link> ``` router-link 組件屬性: active-class 用于設置路由激活時的 CSS 類名。默認值: "router-link-active"，默認值可以通過路由的構造選項 linkActiveClass 來全局配置 默認值 ```html <router-link to="/home">首頁</router-link> <a href="/home" class="router-link-exact-active router-link-active" aria-current="page">首頁</a> ``` 通過 active-class 屬性指定類名 ```html <router-link to="/home" active-class="active">首頁</router-link> <a href="/home" class="router-link-exact-active active" aria-current="page">首頁</a> ``` 通過創建路由實例時的 linkActiveClass 屬性指定類名 ```javascript const router = new VueRouter({ routes, linkActiveClass: "actived" }) ``` #### 6. 通過代碼跳轉路由 this.$router.push() --- replace 不會留下 history 記錄 ```javascript this.$router.push('/home') this.$router.replace('/home') ``` #### 7. 動態路由的使用 --- 路由映射配置: 定義一個動態參數 userId ```javascript { path: '/user/:userId', component: User } ``` 進行路由跳轉時 userId 是動態獲取的 ```html <router-link :to="'/user/' + userId">檔案</router-link> ``` 在 User 組件中獲取動態參數 userId ($route: 當前處于活躍狀態的路由) ``` <p>{{ $route.params.userId }}</p> ``` #### 8. 路由組件的懶加載 --- 執行打包命令 ``` npm run build ``` 當前應用程序開發的所有業務代碼都在一個文件中（前綴為 app 的 js 文件） 第三方插件的東西都會打包到 vendor 前綴的 js 文件中 manifest 前綴的 js 文件是為我們打包的代碼做底層支撐的 (commonjs、ES6 語法)  因為業務代碼都在一個文件中，當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載，那么用戶就會出現短暫空白的情況，所以我們應該想個辦法將存放業務代碼的 `app.*.js` 文件進行分離 如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了 路由懶加載的主要作用就是將路由對應的組件打包成一個個的 js 代碼塊，只有在這個路由被訪問到時，才加載對應的組件 路由懶加載的寫法 ```javascript { path: '/home', component: () => import('@/components/Home') } ``` 如下圖所示，三個路由映射使用了懶加載生成了三個對應的 js 文件  #### 9. 嵌套路由的使用 --- Home 組件 ```html <template> <div> <h2>我是首頁</h2> <p>首頁內容，哈哈哈</p> <router-link to="/home/news">新聞</router-link> <router-link to="/home/message">消息</router-link> <router-view></router-view> </div> </template> ``` 路由映射配置 (嵌套路由: /home/news、/home/message): ``` { path: '/home', component: Home, children: [ { path: '', redirect: 'news' }, { path: 'news', component: HomeNews }, { path: 'message', component: HomeMessage }, ] }, ``` #### 10. vue-router 參數傳遞 --- 傳遞參數主要有兩種方式: params 和 query | 類型 | 配置路由 | 傳遞方式 | 使用示例 | | ------------ | ------------ |------------ |------------ | | params | /router/:id | 在 path 后面跟上對應的值 | /router/10 | | query | /router | 對象中使用 query 的 key 作為傳遞方式 | /router?id=10 | router-link 組件 query 方式傳遞參數 ```html <router-link :to="{path: '/profile', query: {id: 10, name: 'liang'}}">檔案</router-link> ``` js 代碼以 query 方式傳遞參數 ```javascript this.$router.push({ path: "/profile", query: { id: 10, name: "liang", }, }); ``` 在 Profile 組件中獲取 query 方式傳遞的參數 ```html <template> <div> <h2>我是Profile組件</h2> <p>{{ $route.query.id }}</p> <p>{{ $route.query.name }}</p> <button @click="btnClick">點擊</button> </div> </template> ``` #### 11. 導航守衛的認識和基本使用 --- 導航守衛就是路由跳轉過程中的一些鉤子函數 (導航: 表示路由正在發生改變, 守衛: 可以理解為鉤子) 需求: 給每個路由組件設置單獨的網頁標題 title 路由映射配置中添加 meta.title 屬性，用于設置網頁標題 (meta 是路由元信息, 也稱為元數據, 就是用于描述數據的數據) ``` { path: '/home', component: Home, meta: { title: '首頁' } }, { path: '/about', meta: { title: '關于' }, component: About }, ``` 全局前置守衛 ```javascript router.beforeEach((to, from, next) => { document.title = to.matched[0].meta.title next() }) ``` 補充: 全局后置守衛 ```javascript router.afterEach((to, from)=>{ console.log('afterEach ....') }) ``` 路由獨享守衛需要在路由映射配置中定義： ```javascript { path: '/about', component: About, beforeEnter: (to, from, next) => { console.log('about 路由獨享守衛執行') next() } }, ``` #### 12. keep-alive 組件的使用 --- keep-alive 是 vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染 router-view 是 vue-router 中的組件，如果被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存 嵌套路由保持組件選中狀態: ``` data() { return { path: "/home/news", }; }, activated() { // 當組件處于活躍狀態時觸發 this.$router.push(this.path); }, beforeRouteLeave(to, from, next) { // 導航離開該組件的對應路由時調用 // 可以訪問組件實例 `this` this.path = this.$route.path; next(); }, ``` 有些時候我們可能只需要部分組件被緩存，此時可以通過 include 或 exclude 屬性來處理 include 只有匹配的組件會被緩存，exclude 匹配的組件不會被緩存 exclude 屬性值是組件導入的 name 屬性值，多個使用逗號分隔 ```html <keep-alive exclude="User,Profile"> <router-view /> </keep-alive> ```