vue项目中关于路由的配置

在开发vue项目中，如果将所有路由都写在router.ts中会显得些许繁琐
为了解决这个问题呢，我们可以在每个模板下创建router文件将其抛出，然后在项目下的总router.js将其引入，在更改或者查找路由时会清晰明了

首先在每个模板下创建router.ts

export default {
// 当前模板设置的路由
    path: '/home',
    name: 'home',
// 引入所设置路由的文件
    component: () => import('@/pages/home/home.vue')
  };

在项目下的router.ts中获取每个模板下的router.ts然后对其配置

import Vue from 'vue';
import Router from 'vue-router';
const routeFiles = require.context('./pages', true, /router.ts$/);

const routes = routeFiles.keys().map(key => routeFiles(key).default || routeFiles(key));
Vue.use(Router);

// 常规路由
export const constantRoutes = [
  ...routes
];

// 不受权限控制的路由
export const asyncRoutes = [];

export default new Router({
  base: process.env.BASE_URL,
  routes: constantRoutes,
  scrollBehavior: () => ({ x: 0, y: 0 }) // 切换路由后页面重置到顶部
});