vue-router的使用

模塊化路由

1.在src文件夾下新建router文件夾,新建router.ts(包含路由攔截器)

import Vue from 'vue';
import Router from 'vue-router';
import store from '@/store';
import login from '@/router/login/index';
import home from '@/router/home/index';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [...home, ...login]
});
// 導(dǎo)航守衛(wèi)(路由攔截)
router.beforeEach((to, from, next) => {
  
  // 如果沒登錄，就跳到登錄頁
  const isLogin: boolean = store.getters.isLogin;
  if (isLogin) {
    next();
  } else {
    if ('/login'.indexOf(to.path) !== -1) {
      next();
    } else {
      next(`/login`);
    }
  }
});
export default router;

2.在src/router文件夾下建login文件夾,新建login.ts(登錄路由模塊)

export default [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue')
  }
];

2.在src/router文件夾下建home文件夾,新建home.ts(主路由模塊)

import Home from '@/App.vue';

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/page1',
    children: [
      {
        path: '/page1',
        name: 'page1',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "login" */ '@/views/home/Page1.vue')
      },
      {
        path: '/page2',
        name: 'page2',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "login" */ '@/views/home/Page2.vue')
      }
    ]
  }
];