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

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 路由导航守卫 全局前置守卫)