vuerouter拦截?

写法如下,在路由文件中加入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的值是否是有权限之类的再进行跳转,可以控制页面流程

上一篇:二十六:XSS跨站之订单及shell箱子反杀


下一篇:vue全家桶系列之vue-router(二)