Vue-router路由守卫

实现效果: 查看某个页面时, 要求必须是已登录状态才允许查看

如视频 :对武汉页面进行守卫

路由守卫小demo

解决：通过Vue-router路由守卫

vue中路由守卫一共有三种: 全局路由守卫，组件内路由守卫，router独享守卫

1.路由独享守卫

路由独享守卫是在路由配置页(router/index.js)的路由表中, 单独给某个路由配置的一个守卫

了解3个参数: ①to:表示要去哪里 ②from：表示从哪里来 ③next：放不放行
next()参数配置 :
next()等价于 next( true ) 表示通过, 允许从当前路由跳转到目标路由
next( false )表示不通过， 不允许从当前路由跳转到目标路由
next("/login")等价于next(path:"/login")跳转指定的路由

完整代码:

const routes = [
  //citys根路由
  {
    path: '/citys',
    component: citys,
    //子路由
    children: [
      {
    path: 'wh', 
        component: wh,
        //保卫武汉
        beforeEnter:(from,to,next)=>{