根据vue-router封装路由

一个项目中都会有路由，要是路由太多了将路由放一个文件则不是很合适,所以我们一般会在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: ''
  }
}]