vue实力采坑之url变化问题

实力采坑,学到就是自己的,fighting

vue.js :             https://cn.vuejs.org/

vur-router:       https://router.vuejs.org/zh-cn/index.html

vuex:               https://vuex.vuejs.org/zh-cn/ 

axios               https://www.kancloud.cn/yunye/axios/234845


                  项目中某一个模块(A模块)是需要登录才能查看的,但是并非一进入网站就需要去登录的,这样的网站大家应该见过很多(例如淘宝)。路由大家肯定都会选择vue-router,那么在做登录验证的时候,导航钩子router.beforeEach肯定会用到,官方文档说了多种情况(希望以后我都用的到吧)我这里使用的是最常见的全局钩子。

我在做这个功能的时候,第一件事就是百度,搜索到的结果大多是下面这样的


   path:'/a',
   component: A,
   meta: { requiresAuth: true }
}

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!store.state.loginStatus) {
       next({
path: '/login',
query: { redirect: to.fullPath }//把要跳转的地址作为参数传到下一步
})
    } else {
      next() 
   }
} else {
     next() // 确保一定要调用 next()
  }
})

点击A模块的时候,/#/home----> /#/login?redirect=%2Fa,完成登录操作后就跳转到A模块   /#/login?redirect=%2Fa--->/#/a,

难道这是vue-router的特性?当然不是,这个对用户体验不好。然后各种看资料,最后还是来到了官方文档,原来next有三种情况,

1不需要验证,直接通过   2验证,url不跳转   3验证,url半跳转      原来vue-router早就为我提供了解决方案,所以将

 next({
path: '/login',
query: { redirect: to.fullPath }//把要跳转的地址作为参数传到下一步
})

换成next(false)就好了。点击A模块的时候 , 完成登录操作后,url没有改变   /#/home 



爱生活 ,爱佳佳



你可能感兴趣的:(vue实力采坑之url变化问题)