vuerouter拦截？

2021-09-21 19:05:03 阅读：150 来源： 互联网

标签：vue console log AddStudent vuerouter router path 拦截

写法如下，在路由文件中加入router.forEach的方法router.forEach((to,form,next)=>{})

import Vue from 'vue'
import Router from 'vue-router'
import AddStudent from '@/components/AddStudent.vue'
import Success from '@/components/success.vue'
const path = require('./handleRouter.js')
const fs = require('fs')
// console.log(path)
fs.readFile(path + '/AddStudent.vue', function (err, data) {
  if (err) {
    return console.error(err)
  }
  console.log('异步读取: ' + data.toString())
  console.log('data.toString()')
  console.log(data)
})
// const path = require.context('../components', true, /\.vue$/)
// console.log(path)
Vue.use(Router)
console.log('AddStudent')
console.log(AddStudent)
const router = new Router({
  // base: '/mp/',
  routes: [
    {
      path: '/',
      name: 'AddStudent',
      component: AddStudent,
      meta: {
        auth: 'fuck'
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/components/login.vue')
    },
    {
      path: '/success',
      name: 'Success',
      component: Success,
      meta: {
        auth: 'diu'
      }
    }
  ]
})

router.beforeEach((to, form, next) => {
  if (to.meta.auth === 'fuck') {
    next({
      path: '/login'
    })
  } else {
    next()
  }
})

export default router

如上代码，可以判断meta元信息的auth的值是否是有权限之类的再进行跳转，可以控制页面流程

标签：vue,console,log,AddStudent,vuerouter,router,path,拦截
来源： https://blog.csdn.net/weixin_39238520/article/details/120403884

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuerouter拦截？