一个项目中都会有路由,要是路由太多了将路由放一个文件则不是很合适,所以我们一般会在router文件夹下面建多个文件夹,根据业务模块区分路由。然后在router下建立一个index.js合并所有的路由。
index.js文件内容如下
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = new Array();
// 查找当前目录下面所有的index.js文件
const routerContext = require.context('./', true, /index\.js/);
routerContext.keys().forEach(router => {
// 过滤router下面的index.js
if(router.startsWith('./index')) return
const routerModule = routerContext(router);
// 合并模块中的路由
routes = [...routes, ...(routerModule.default || routerModule)]
});
const router = new VueRouter({
mode: 'hash', // 设置路由模式
base: process.env.BASE_URL, // 设置路由前缀
routes: routes, // 路由模块
// 设置切换路由滑动位置
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}
})
// 放置一个路由守卫做一些权限判断等
router.beforeEach(async (to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
// 如果用户未能验证身份,则 `next` 会被调用两次
// 设置每个页面的title
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
export default router
例如有user模块相关index.js代码内容
export default [{
path: '/user/:id',
name: 'user',
component: () => import('@/pages/user/index.vue'),
meta: {
title: ''
}
}]