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
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github