## :-: vue - router 方法 ``` // 跳轉到指定路徑 push、replace // this.$router.push('/home'); // 添加 [a, b, c] => [a, b, c, d] // this.$router.replace('/home'); // 完全替換 [a, b, c] => [a, b, d] // go -- 刷新(0)、前進(1)、后退(-1) // this.$router.go( -2 ); // 后退2步 ``` ## :-: 導航守衛 ``` export default { // beforeRouteEnter -- 當路由切換進來的時候觸發 beforeRouteEnter(to, from, next) { // 要注意：此時組件沒有完全加載好，所以拿不到this。 this === undefined next(vm => { // 通過這種方式(回調)就可以拿到this了、 // console.log(vm); }); }, // beforeRouteLeave -- 當路由將要被切換到別的頁面時攔截觸發 (導航守衛) beforeRouteLeave(to, from, next) { // to -- 包含要去到的路徑信息 // from -- 包含當前路徑的信息 // next -- 是否要進行跳轉、 next() -- next執行就表示跳轉，不執行就不調轉、 // console.log(to, from, next); !this.name ? next() : confirm("表單還有內容，請問要放棄不保存了嗎？") && next(); }, // beforeRouteUpdate -- 當路由被改變時觸發 beforeRouteUpdate(to, from, next) { // console.log(to, from, next); // -- this.getData(to.params.id); next(); }, }; ``` ``` beforeRouteEnter -- 當路由切換進來的時候觸發 beforeRouteLeave -- 當路由將要被切換到別的頁面時攔截觸發 (導航守衛) beforeRouteUpdate -- 當路由被改變時觸發 to -- 包含要去到的路徑信息 from -- 包含當前路徑的信息 next -- 是否要進行跳轉、 next() -- next執行就表示跳轉，不執行就不調轉、 ``` ## :-: vue - 動態路由配置 ``` { // 動態路由 path: '/question/:id', name: 'question', component: () => import ('./views/Question') } <!-- :to="{name:'question',params:{id:index}}" -- 動態路由 --> <!-- :to="{name:'question',query:{id:index}}" -- ?id=123 --> <router-link tag="tr" :to="{name:'question',query:{id:index}}" v-for="(item,index) in jsonArr" :key="index"> <th class="text-center">{{index+1}}</th> <td class="text-center">{{item[0]}}</td> <td class="text-center">{{item[2]}}</td> </router-link> ``` ## :-: 全局守衛 (main.js) ``` // 進頁面前觸發 router.beforeEach((to, from, next) => { // if (['student', 'academic'].includes(to.name)) return; // some every let needLogin = to.matched.some(ele => ele.meta && ele.meta.login === true); if (needLogin) { // 判斷是否需要登陸 let isLogin = document.cookie.includes('login=true'); if (isLogin) { next(); } else { isLogin = window.confirm('該頁面需要登陸后才能訪問 ~'); if (isLogin) { next('/login'); } // 需要登陸 } } else { next(); } }); // 解析完畢執行 router.beforeResolve((to, from, next) => { // to and from are both route objects. must call `next`. // next(); }) ``` ## :-: vue - router (路由插件基本配置) :-: main.js (配置主入口文件) ``` import Vue from 'vue' import App from './App.vue' import router from './router.js' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app'); ``` :-: router.js (配置) ``` import Vue from 'vue'; import Router from 'vue-router'; // 可以省略.vue的后綴 import Home from './views/Home'; // Vue.use(Router); -- 使路由插件生效 // $router -- 路由方法 $route -- 路由屬性 Vue.use(Router); export default new Router({ // mode -- 切換路由的模式(hash、history) mode: 'history', routes: [{ path: '/', name: 'home', component: Home }, { path: '/learn', name: 'learn', // 分頁懶加載 component: () => import ('./views/Learn') }, { path: '/student', name: 'student', component: () => import ('./views/Student') }, { path: '/about', name: 'about', component: () => import ('./views/About') }, { path: '/community', name: 'community', component: () => import ('./views/Community') } ] }); ``` :-: App.vue (在主模塊中的運用) ``` <template> <div id="app"> <ul id="nav"> <!-- router-link -- 用于跳轉的組件 --> <!-- router-link 默認會被渲染成 a標簽 通過添加 tag="li" 使其規定渲染成指定的標簽(li) --> <router-link tag="li" to="/">Home</router-link>| <!-- 還可以將 to="/learn" 寫成 :to="{path:'/learn'}" 或 :to="{name:'learn'}" 效果一樣 --> <router-link tag="li" to="/learn">Learn</router-link>| <router-link tag="li" to="/student">Student</router-link>| <router-link tag="li" to="/about">About</router-link>| <router-link tag="li" to="/community">Community</router-link> </ul> <!-- router-view -- 切換路徑時所展示的組件 --> <router-view /> </div> </template> <style> *{ margin:0; padding:0; box-sizing:border-box; } #app{ background:#f0fbff; min-height:100vh; } #nav{ background:#95bfcc; display:flex; flex-wrap:nowrap; line-height:50px; cursor:default; } ul#nav>li{ list-style:none; padding:0 30px; cursor:pointer; } </style> ``` :-: 各分頁模塊  ``` <template> <div> ··· </div> </template> <script> export default { ··· }; </script> <style> ··· </style> ```