vue-router在项目中的完善以及模块懒加载

vue-router 的完善

今天学到了vue-router更为复杂的使用。一般的使用就是实现路由跳转，通过router-link将需要跳转的地方包裹起来，然后在里面传参数（:to="/index"），最后通过router-view进行展现。

而今天的用法是基于新的需求，例如在我们的博客项目中，有些页面需要判断用户是否登录才能得以展现。比如说创建博客，编辑博客，我的页面。这些页面用户不登录是无法进行展现的。

所以我们需要在路由页面代码中 加入meta参数以确定这些页面是需要去做判断用户是否处于登录状态的。

    {
      path: '/create',
      component: ()=> import('@/pages/Create/template.vue'),
      meta: { requiresAuth: true}
    },
    {
      path: '/edit/:blogId',
      component: ()=> import('@/pages/Edit/template.vue'),
      meta: { requiresAuth: true}
    },
    {
      path: '/my',
      component: ()=> import('@/pages/My/template.vue'),
      meta: { requiresAuth: true}
    },

然后再进行判断，先在路由跳转的时候遍历匹配需要进行判断页面，匹配到了再进行判断，如果没有登录，那么就跳转到登录页面。这里面引入了vuex的store，因为需要使用里面的checkLogin方法确认用户是否登录。

router.beforeEach((to, from, next) => {
   if( to.matched.some(record => record.meta.requiresAuth)) {
     store.dispatch('checkLogin').then(isLogin=>{
      if(!isLogin) {
        next({
          path: '/login',
          query: { redirect: to.fullPath}
        })
      }else {
        next()
      }
     })
   }else{
     next()
   }
})

然后还需要注意的一点是我们需要在登录页面的js部分进行修改。其业务逻辑是：在我们没有登录的情况下进入创建博客页面，这时基于上方的代码，我们会进入登录页面，然后登录。登录成功后，我们希望页面还是之前点击的创建博客页面。

所以我们就需要在登录页面的js部分进行修改，这是登录页面的登录方法。

onLogin(){
      this.login({username: this.username, password: this.password})
          .then(()=>{
            this.$router.push({path: this.$route.query.redirect || '/'})
          })
    }

模块懒加载。

懒加载是为了优化性能。我们想要的效果是用户点击哪个页面就加载哪个页面的内容，而不是用户刚登录进网站就把博客的全部内容加载出来。所以我们的router这么写，当跳转的时候再引进，而不是一开始就引进。

const router = new Router({
  routes: [
    {
      path: '/',
      component: ()=> import('@/pages/Index/template.vue')
    },
    {
      path: '/login',
      component: ()=> import('@/pages/Login/template.vue')
    },
    {
      path: '/register',
      component: ()=> import('@/pages/Register/template.vue')
    },
    {
      path: '/create',
      component: ()=> import('@/pages/Create/template.vue'),
      meta: { requiresAuth: true}
    },
    {
      path: '/edit/:blogId',
      component: ()=> import('@/pages/Edit/template.vue'),
      meta: { requiresAuth: true}
    },
    {
      path: '/my',
      component: ()=> import('@/pages/My/template.vue'),
      meta: { requiresAuth: true}
    },
    {
      path: '/user/:userId',
      component: ()=> import('@/pages/User/template.vue')
    },
    {
      path: '/detail/:blogId',
      component: ()=> import('@/pages/Detail/template.vue')
    }
  ]
})