Vue路由

[heikaimu]

路由基础

路由的三种方法

$router.push('/login')
$router.push({ path: '/login', query: { redirect: '/list' }})

这个方法会向 history 栈添加一个新的记录

$router.replace('/login')
$router.replace({ path: '/login', query: { redirect: '/list' }})

这个方法会不会新增，而是替换当前的路由
(灵活的使用replace可以很好的解决使用go(-1)返回前一页导致的某两个路由间无限的来回跳转的BUG)

$router.go(-1)

参数为回退的步数

路由守卫

有某些路由跳转的时候，我们可能会在跳转的过程中做一些事情，而不是跳转完成之后在新的组件的create实现，这个时候我们就需要用到路由守卫。

全局路由守卫

某些页面是需要我们登录了之后才能进去的，这个时候我们就可以设置一个全局的路由守卫来判断当前登录状态，从而决定是跳转到该页面还是跳转到登录页面。

要实现这个功能，我们首先需要再router.js里面给每需要登录的组件添加一个判断属性：

router.js

export default new Router({
  routes: [
    {
      path: '/xxx',
      component: xxxComponent,
      meta: {
        requireAuth: true
      }
    }
  ]
})

然后在main.js里面书写判断规则：

main.js

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断前往的路由是否包含有requireAuth, 有则进行登录认证判断, 没有则直接跳转
    if (store.state.loginIfo.isLogin) { // 判断vuex保存的值如果登录则直接跳转
      next();
    } else { // 未登录则跳转至登录交界面并且将本应该跳转的路由作为参数方便登录成功之后的跳转操作
      next({
        path: '/login',
        query: { redirect: to.fullPath }  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next();
  }
})

在登录页面获取url参数的时候需要转码：

login.vue

export default {
  methods: {
    login() {
      .....
      let redirect = decodeURIComponent(this.$route.query.redirect || '/'); // 需要转码
      this.$router.push(redirect);
    }
  }
}

局部的路由守卫

现在我们的场景是这样的：

B组件是一个列表页面，C组件是B组件列表的详情页面，A组件和B组件是平级的关系。现在我们需要实现一个需求是，A->B 从头部位置开始，C->B，回到之前的页面滚动位置。

首先我们使用vuex来保存B->C时的页面滚动距离。然后在create周期里滚动到vuex保存的这个距离。

如果这样每次都会滚动到之前保存的滚动位置，这样对于A->C来说是不行的，A->C是需要从头开始。

所以我们可以在B组件写上一个局部的路由：

beforeRouteEnter (to, from, next) {
      var patrn = /^\/A\//;
      if (!patrn.exec(from.fullPath)) {
        const scrollIfo = {
          position: 0
        }
        store.commit('SET_PAGE_SCROLL', scrollIfo);
      }
      next(vm => {});
    }

我们在B组件还未创建的时候判断from组件的fullPath，来对应设置存储在vuex里的滚动位置，就可以完全实现。当然也可以把在A组件的生命周期中设置position为0，但是那样就将B组件的逻辑放在了A组件里，我觉得是非常不方便管理的。