## :-: 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> ```