router 和 路由守卫

路由配置

1. 分模块配置
2. 404 配置
3. 懒加载
4. active-class

路由守卫(跟 axios 拦截器有异曲同工之妙)

1. to 即将要进入的目标 路由对象

2. from 当前导航正要离开的路由

3. next 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

   • next() 直接进入进行管道中的下一个钩子
   • next({ path: '/xxx' }) 跳转到/xxx 路由

应用

1. 动态的给每个页面添加 title
2. 在某些路由页面,比如我的订单,购物车等需要登录的页面,判断是否登录,若没登录就跳到登录页面,

import Vue from "vue";
import Router from "vue-router";
import store from '../store/index';

Vue.use(Router);

const router = new Router({
  routes: [{
      path: "/",
      redirect: "/index"
    },
    {
      path: "/order",
      meta: {
        title: '我的订单',
        needLogin: true
      },
      component: () => import("@/views/order/index")
    },
    {
      path: "/cart",
      meta: {
        title: '购物车',
        needLogin: true
      },
      component: () => import("@/views/cart/index")
    },
    {
      path: '/login',
      component: () => import('@/views/login/index'),
      meta: {
        title: '登陆'
      }
    },
    {
      path: '/index',
      component: () => import('@/views/index/index'),
      meta: {
        title: '首页'
      }
    },
    {
      path: "/my",
      component: () => import("@/views/my"),
      redirect: '/my/center',
      children: [{
        path: 'center',
        meta: {
          title: '个人中心',
        },
        component: () => import('@/views/my/center')
      }, {
        path: 'set',
        meta: {
          title: '设置',
        },
        component: () => import('@/views/my/set')
      }]
    },
    {
     // 404配置
     path: '*',
   component: () => import('@/views/notFound')
    }
  ]
});


router.beforeEach((to, from, next) => {
  let {
    title,
    needLogin
  } = to.meta;
  // 从vuex获取登录状态
  let isLogin = store.state.isLogin;
  document.title = title;

  if (needLogin && !isLogin) {
    next({
      path: '/login'
    })
  } else {
    next();
  }
})

export default router;