vue-router介紹 · 前端學習筆記

[vue router官方文檔](https://router.vuejs.org/zh/) 完整router/index.js在最后 **component: () => import('@/components/login')是路由懶加載方式** [官網路由懶加載](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97) # 動態路由 router/index.js 中配置 ``` { // id 為自定義,可根據自己的情況更改如 '/hello/:name path: '/hello/:id', component: () => import('@/components/router/hello'), props: true // 這個參數為true表示把 :id這個參數放到頁面的props屬性中 } ``` html使用 ``` <ul> <li>  <router-link to="/hello/1">Go to hello1</router-link> </li> <li> <router-link :to="path='/hello/2'">Go to hello2</router-link> </li> <li> <router-link :to="path='/hello/3'">Go to hello3</router-link> </li> <li> <router-link to="/hello/4">Go to hello4</router-link> </li> </ul> ``` 或者在方法中使用 ``` this.$router.push({ path: '/hello/2' }); ``` 可在動態路由對應的頁面獲取 :id 的參數 :id是自定義的,用于獲取時使用獲取URL中 /hello/:id 中的id的結果,使用this.$route.params.id獲取 '/hello/:name' 使用this.$route.params.name獲取如果路由中使用了props: true,那么可以使用props里定義同名變量的形式獲取,然后直接當做props的普通屬性一樣使用 # 嵌套路由 router/index.js 中配置 **注意子路由的path寫法** 在需要使用嵌套子路由的路由里使用 children,將子路由配置在children 子路由會渲染在父路由html中的router-view的位置 ``` { path: '/router', component: () => import('@/components/router/routerMain'), // 嵌套子路由 children: [ { // id 為自定義,可根據自己的情況更改如 '/hello/:name path: '/hello/:id',//這個訪問時url是 /hello/:id // path: 'hello/:id, // 這個訪問時url是 /router/hello/:id component: () => import('@/components/router/hello') } ] } ``` 父路由頁面html中要渲染子頁面的地方配置router-view ![](https://box.kancloud.cn/64bb6077999f66cf8932443fb0ede54d_899x225.png) 展示渲染結果 ![](https://box.kancloud.cn/37a34d48e277c5e9d68d26d970f9cf19_705x285.png) # router-link路由 HTML使用 ``` <router-link to="/hello">Go to hello4</router-link> ``` 會跳轉到router/index.js中的 path為 '/hello' 的路由 router-link默認解析為a標簽 # 方法中使用路由除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。 ``` router.push(location, onComplete?, onAbort?)； // 項目中使用 this.$router.push({ path: '/routerQuery', query: {id: id} // 路由傳參,后邊有介紹 }); ``` **注意**：在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router.push。 | 聲明式 | 編程式 | | --- | --- | | `<router-link :to="...">` | `router.push(...)` | 例如: 點擊按鈕,觸發方法進行跳轉路由 ![](https://box.kancloud.cn/a16ed695d959b3c68e423818ee713b43_755x253.png) # 重定向重定向使用 redirect 本例當瀏覽器url為 http://localhost:8085/#/ 時會自動轉到http://localhost:8085/#/router ![](https://box.kancloud.cn/0a0cf26d9b3e2ad0e0b2c43ff3906087_651x347.png) # 路由傳參第一種路由傳參 (query) 參數顯示在url中,使用this.$route.query 獲取傳參對象例如 : ``` this.$router.push({ path: '/routerQuery', query: {id: id, val: this.banner} }); // 對應頁面使用 this.$route.query.id 獲取傳的 id值 ``` 第二種路由傳參 (params需要在路由中配置name名稱),params 不會將參數顯示在url中,刷新頁面值丟失,name對應 index.js中的路由 name值使用this.$route.params 獲取傳參對象例如 : ``` this.$router.push({ name: 'routerQuery', params: {id: id, val: this.banner} }); // 對應頁面使用 this.$route.params.id 獲取傳的 id值 ``` 動態路由的 :id 也是傳參 **query或 params在 router-link和 this.$router.push 中使用方式一致** router-link 中使用 query或 params進行傳參 ``` // 第一種傳參 query <h2>   <router-link :to="{path:'/routerQuery',query: {id:1,val:'router-link參數' }}">router-link query傳參路由</router-link> </h2> // 第二種傳參 params <h2>  <router-link :to="{name:'routerParams',params: {id:1,val:'router-link參數' }}"> router-link params傳參路由</router-link> </h2> ``` 路由參數放到props里 ``` { path: '/', ......, props: route => ({ food: route.query.food }) } .vue頁面直接使用props獲取,這樣路由里的參數就賦值給props里了 props: { food: { ...... } } ``` # 命名路由 app.vue ``` <div> <header></header> <router-view/> <router-view name='email'/> <router-view name='tel'/> </div> ``` 路由文件在components 中定義位置,default渲染到沒有name屬性的router-view上,其他渲染到對應的name上 ``` { path:'/named', components: { default: () => import('/components/router/hello'), email: () => import('/components/router/email'), tel: () => import('/components/router/tel') } } ``` # 路由守衛 ## 全局路由守衛比如登錄驗證在router/index.js中例子里面是把路由分成了多個頁面 ``` import Vue from 'vue' import Router from 'vue-router' // 路由存放頁面 import routes from './router' Vue.use(Router) // 是否登錄,值來自后臺 const HAS_LOGIN = true; const router = new Router({ routes }); // 前置守衛 router.beforeEach((to, from, next) => { // 不是登錄頁面 if(to.path !=='/login') { // 已登錄 if (HAS_LOGIN) { // 放過去 next(); } else { // 跳轉登錄頁面 next({path: '/login'}) } } else { // 已登錄 if (HAS_LOGIN) { // 跳轉首頁 next({path: '/index'}); } else { // 放過去 next(); } } }); // 后置守衛 router.afterEach((to, from) => { }) export default router; ``` ## 路由獨享守衛配置在路由列表的具體路由中 ``` { path: '/about', name: 'about', component: () => import('../views/About.vue'), beforeEnter: (to, from, next) => { if(from.path === '/login') { console.log("這是從登錄頁過來的") } else { console.log("這不是從登錄頁過來的") } next(); } } ``` ## 組件內守衛 ``` beforeRouteEnter(to, from, next) { console.log("這里不能使用this,因為還沒有進入本頁面"); next(vm => { // vm 就是this console.log(vm) }); }, beforeRouteUpdate(to, from, next) { // 可以使用this對象 console.log("動態路由改變 :id 時可觸發") }, // 離開守衛 beforeRouteLeave(to, from, next) { // 可以使用this對象 const leave = confirm("確定離開"); if (leave) { next(); } else { next(false); } } ``` ## 完整的導航流程 1. 導航被觸發 2. 在失活的組件(即將離開的頁面組件)里調用離開守衛 beforeRouteLeave 3. 調用全局的前置守衛 beforeEach 4. 在重用的組件里調用 beforeRouterUpdate (如果是重用的) 5. 調用路由獨享的守衛 beforeEnter 6. 解析異步路由組件 7. 在被激活的組件(即將進入的頁面組件)里調用beforeRouteEnter 8. 調用全局的解析守衛 beforeResolve 9. 導航被確認 10. 調用全局的后置守衛 afterEach 11. 觸發DOM更新 12. 用創建好的實例調用beforeRouterEnter守衛里傳給next的回調函數 # 路由元信息使用元信息meta 修改頁面的title 路由列表里添加meta信息 router/router.js ``` { path: '/about', name: 'about', component: () => import('../views/About.vue'), beforeEnter: (to, from, next) => { if(from.path === '/login') { console.log("這是從登錄頁過來的") } next(); }, meta: { title: '關于' } } ``` 在src/lib/util.js ``` export const setTitle = title => { window.document.title = title || 'admin'; } ``` 在router/index.js ``` import setTitle from '../lib/util' router.beforeEach((to, from, next) => { // 設置title to.meta && setTitle(to.meta.title); // 不是登錄頁面 if(to.path !=='/login') { .... } }); ``` # 匹配優先級有時候，同一個路徑可以匹配多個路由，此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。 # 完整router/index.js ``` import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router) export default new Router({ routes: [{ path: '/', redirect: { path:'/router' }, component: () => import('@/components/login') }, { path: '/resume', name: 'resume', component: () => import('@/components/resume/resume') }, { path: '/router', component: () => import('@/components/router/routerMain'), // 嵌套子路由 children: [ { // id 為自定義,可根據自己的情況更改如 '/hello/:name path: '/hello/:id', component: () => import('@/components/router/hello') } ] }, { path: '/routerQuery', name: 'routerQuery', component: () => import('@/components/router/routerQuery') }, { path: '/routerParams', name: 'routerParams', component: () => import('@/components/router/routerParams') }, { path: '/watch', component: () => import('@/components/demo/watch-computed') }, { path: '/class', component: () => import('@/components/demo/class-style') }] }) ```