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 

爱生活 ，爱佳佳