根據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: ''
  }
}]