Vue路由守卫的使用

示例如下:(第一张图)当你点击车1的时候你写了路由守卫就点不开出现无权访问

(第二张图,就是可以访问后的图)有路由守卫点不开的情况下当你在本地存储中写了你在路由守卫中写的东西就可以进入了

你需要在router下的index.js中(以下代码有我写的路由页面不用管,看有注释的代码是路由守卫,通过你定义的"user=张三"的时候访问就会显示出来第二张图)

javascript 复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import CarView from '@/views/CarView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'car',
    component: CarView,
   
  },
  {
    path: '/car',

  
    name: 'car',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: CarView,
    children: [
      {
        name: "/car/carone",
        path: "carone",


// 这个是路由守卫
        meta:{
          isAuth:true,
        },

        
        component: () => import(/* webpackChunkName: "about" */ '../views/CarViewOne.vue')
      },
      {
        name: "/car/cartwo",
        path: "cartwo",
        component: () => import(/* webpackChunkName: "about" */ '../views/CarViewTwo.vue')
      },
      {
        name: "/car/carthree",
        path: "carthree",
        component: () => import(/* webpackChunkName: "about" */ '../views/CarViewThree.vue')
      },
    ],
  },
  {
    path: '/phone',
    name: 'phone',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this routeb
    // which is lazy-loaded when the route is visited.
    
    component: () => import(/* webpackChunkName: "about" */ '../views/PhoneView.vue')
  },
]

const router = new VueRouter({
  mode:'history',
  base:process.env.BASE_URL,
  routes

})

// 这个就是路由守卫看上面的路由页面中 CarView第一个车1 /car/carone的页面中 meta 就是和一下这段路由去写的
//全局前置路由守卫------------初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  // console.log(to,from);
  //如果路由需要跳转
  if (to.meta.isAuth) {
      let user = localStorage.getItem('user')
     if (user == '张三'){
      next()
     }else{
      alert('无权访问')
     }
  } else {
      // 否则,放行
      next()
  }
})
export default router
相关推荐
王解35 分钟前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录35 分钟前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁39 分钟前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂44 分钟前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑2136 小时前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程