问：如何将 Vue Router (v4) 拆分为多个文件答案

【问题标题】：Q: How would I split Vue Router (v4) into muliple files问：如何将 Vue Router (v4) 拆分为多个文件
【发布时间】：2021-05-22 05:09:26
【问题描述】：

我可以在 Vue Router 上使用一些帮助。我正在使用 Vue 3，并且一直在阅读路由器 documentation 并寻找解决方案，但我还没有找到我的问题的答案。

我对 Vue 本身还很陌生，而且我的路由器文件开始变得非常大。我尝试了几种在网上找到的不同方法来拆分我的路由器文件，但似乎都没有奏效（它们适用于以前版本的 Vue）。您是否知道我可以阅读的任何资源，或者我只是遗漏了什么？

我尝试为管理路由创建一个路由器文件，使用 router.push() 导入并推送到路由器，但是当我加载应用程序时，找不到该路由。

例子：

/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Authentication from '@/views/Public/Authentication.vue'
import NotFound from '@/views/Public/NotFound.vue'
import NetworkError from '@/views/Public/NetworkError.vue'

import adminRoutes from '@/modules/admin/router'

const routes = [
  {
    path: '/',
    redirect: '/admin'
  },
  {
    path: '/auth',
    name: 'Auth',
    component: Authentication
  },
  {
    path: '/:catchAll(.*)',
    name: 'NotFound',
    component: NotFound
  },
  {
    path: '/404/:resource',
    name: '404resource',
    component: NotFound,
    props: true
  },
  {
    path: '/network-error',
    name: 'NetworkError',
    component: NetworkError
  }
]

router.push(adminRoutes);

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

/modules/admin/router/index.js

import Admin from '@/views/Admin/Admin.vue'
import Dashboard from '@/views/Admin/Dashboard.vue'
import Settings from '@/views/Admin/Settings.vue'

export default [
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    children: [
        {
          path: 'Dashboard',
          component: Dashboard
        },
        {
          path: 'settings',
          component: Settings
        }
      ]
  },
]

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

很好。我回答了我自己的问题。我想我已经盯着这个问题很久了，我的眼睛很累。这对我有用，但如果有更好的方法，欢迎反馈：

import { createRouter, createWebHistory } from 'vue-router'
import Authentication from '@/views/Public/Authentication.vue'
import NotFound from '@/views/Public/NotFound.vue'
import NetworkError from '@/views/Public/NetworkError.vue'

import adminRoutes from '@/modules/admin/router'

const routes = [
  ...adminRoutes,
  {
    path: '/',
    redirect: '/admin'
  },
  {
    path: '/auth',
    name: 'Auth',
    component: Authentication
  },
  {
    path: '/:catchAll(.*)',
    name: 'NotFound',
    component: NotFound
  },
  {
    path: '/404/:resource',
    name: '404resource',
    component: NotFound,
    props: true
  },
  {
    path: '/network-error',
    name: 'NetworkError',
    component: NetworkError
  }
]

router.push(adminRoutes);

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

【讨论】：

routes.push(adminRoutes) 和 ...adminRoutes 一个多余的兄弟。