欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 路由导航守卫 全局前置守卫

程序员文章站 2022-03-24 18:17:39
...
var routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function(location, onComplete, onAbort) {
  if(typeof location == "string") {
    let s = "&"
    if(location.indexOf('?') == -1) {
      s = "?"
    }
    location = location + s + "random=" + Math.random()
  }
  return routerPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
  routes
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
  var flag = JSON.parse(localStorage.getItem('flag')) 
  if(to.name == "panda" || to.name == "tiger") {
    // console.log(to)
    if(!flag) {
      next({
        name: 'ticket',
        query: {
          type: to.name
        }
      })
    } else {
      // console.log(to.query.type)
      if(to.name === to.query.type) {
        next()
      } else {
        // console.log(to)
        next({
          name: 'ticket',
          query: {
            type: to.name
          }
        })
      }
    }
  } else {
    next()
  }
})

vue重写路由push方法

/**

  • 重写路由的push方法
  • 解决,相同路由跳转时,报错
  • 添加,相同路由跳转时,触发watch (仅限string方式传参,形如"view?id=5")
    */
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  if(typeof(location)=="string"){
    var Separator = "&";
    if(location.indexOf('?')==-1) { Separator='?'; }
    location = location + Separator + "random=" + Math.random();
  }
  return routerPush.call(this, location).catch(error=> error)
}
 

 

 

 

 

相关标签: vue.js