vue 动态路由

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 固定路由
let fixedRoutes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/login',
    name: 'login',
    meta: { title: '登录' },
    component: () => import('@/views/login')
  },
  {
    path: '/home',
    name: 'home',
    meta: { title: '首页' },
    component: () => import('@/views/home')
  }
]
// 动态路由
let dynamicRoute = []
const routerContext = require.context('./', true, /index\.js$/)
routerContext.keys().forEach(route => {
  // 如何是根目录的 waybill.js 不处理
  if (route.startsWith('./index')) return
  const routerModule = routerContext(route)
  dynamicRoute = [...dynamicRoute, ...(routerModule.default || routerModule)]
})

const router = new VueRouter({
  mode: 'history',
  routes: [...fixedRoutes, ...dynamicRoute]
})
router.beforeEach(async (to, from, next) => {
  if (from.meta.needSignScroll) {
    const scrollView = document.querySelector('#scrollView')
    const scrollTop = scrollView ? scrollView.scrollTop : 0
    from.meta.scrollTop = scrollTop
  }
  document.title = to.meta.title || '默认title'
  next()
})

export default router

router/自定义文件夹

import Layout from '@/views/layout'

export default [
  {
    path: '/text',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'text',
        meta: { title: 'text' },
        component: () => import('@/views/text/index.vue')
      }
    ]
  }
]