在开发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 }) // 切换路由后页面重置到顶部
});
