Vue2系列教程——路由守卫
方式一：
import VueRouter from 'vue-router'const router = new VueRouter({routes: [{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "Login" */ '../components/Login')}]
})// 全局前置路由守卫，表示在每次切换路由之前调用，针对所有的路由
router.beforeEach((to, from, next)=>{ // to表示去哪个路由，from表示来自哪个路由，next表示放行// 可加判断条件进行放行if(to.path !== '/login'){ // 判断要去的路由条件if(localStorage.getItem('school') !== 'atguigu'){// 缓存中这个参数如果不是'atguigu'则进入登录重新登陆// 登录成功把这个值存储在缓存中next('/login') } else{next()}}else{next()}
})export default router
方式二：
import VueRouter from 'vue-router'const router = new VueRouter({routes: [{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "Login" */ '../components/Login'),meta: {fangxing: true} // 配置路由元信息 }]
})router.beforeEach((to, from, next)=>{// 判断是否需要鉴权if(to.meta.fangxing){next()}
})export default router
2. 全局后置路由守卫
import VueRouter from 'vue-router'const router = new VueRouter({routes: [{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "Login" */ '../components/Login'),meta: {title: '登录'}}]
})// 全局后置路由守卫，表示在每次切换路由之后调用，针对所有的路由
router.afterEach((to, from)=>{ // to表示去哪个路由，from表示来自哪个路由，注意这里没有nextdocument.title = to.meta.title || '测试网站' // 切换网页标题
})export default router
3. 独享路由守卫
import VueRouter from 'vue-router'const router = new VueRouter({routes: [{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "Login" */ '../components/Login'),meta: {fangxing: true},// 独享路由守卫，独享路由守卫只有前置的，没有后置的beforeEnter: (to, from, next) => {if(to.meta.fangxing){next()}}}]
})export default router
4. 组件内路由守卫
Login.vue文件中，
<script>
// 通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next){},// 通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next){}
script>
5. 路由的工作模式 hash 模式（默认，兼容性好）
hash模式在浏览器地址栏中会出现 “#”，在做网络刷新请求时，“#”后面的不会当作网络地址去请求服务器。 模式（兼容性略差）
模式在浏览器地址栏中不会出现 “#”，但是在做刷新网络请求时就会出错，如果要想解决这一问题，就要后端配合
import VueRouter from 'vue-router'const router = new VueRouter({mode: 'history', // 开启history模式routes: [{path: '/login',name: 'Login',component: () => import(/* webpackChunkName: "Login" */ '../components/Login')}]
})export default router
重启浏览器，即可出现地址栏中没有 “#” 了，
