router.addRoute()在router.beforeEach没有被编译进去

我理解你的问题是在使用Vue Router时，为什么在`router.beforeEach`中调用`router.addRoute()`方法没有生效。这可能是因为`router.addRoute()`必须在路由初始化之前调用，否则新添加的路由无法被编译进去。

解决方法是在路由初始化之前调用`router.addRoute()`方法，例如在`router.beforeEach`之前手动调用`router.addRoute()`方法。或者，您可以使用`router.onReady()`方法来等待路由初始化完成后再进行添加路由操作。

相关问题

使用vue3 + ts + element-plus + axios + router + Pinia + vite编译 1、动态生成路由，模块化管理 2、支持国际化 3、支持换肤

好的，首先你需要安装Vue CLI脚手架工具，然后创建一个Vue3项目。接下来你需要安装一些依赖包：

npm install --save-dev typescript @vue/cli-plugin-typescript @vue/compiler-sfc vite

然后你可以使用以下命令来创建一个Vue3项目：

vue create my-project

安装完毕后，你需要进入项目目录并执行以下命令来安装其他依赖包：

npm install --save vue-router axios element-plus pinia
npm install --save-dev vite-plugin-style-import

接下来，你需要创建一个 `src/router/routes.ts` 文件来定义你的路由。你可以根据自己的需求定义路由信息。例如：

import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
]

export default routes

然后你需要修改 `src/router/index.ts` 文件来动态生成路由。你可以使用以下代码：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import routes from './routes'

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

router.beforeEach(async (to, from, next) => {
  if (router.getRoutes().length === 0) {
    router.addRoute(routes)
    next({ ...to, replace: true })
  } else {
    next()
  }
})

export default router

接下来，你需要创建一个 `src/i18n` 目录来支持国际化。你可以使用 `vue-i18n` 库来实现。例如：

import { createI18n } from 'vue-i18n'
import messages from './messages'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

export default i18n

然后你需要创建一个 `src/i18n/messages.ts` 文件来定义你的翻译信息。例如：

const messages = {
  en: {
    hello: 'Hello World!'
  },
  zh: {
    hello: '你好，世界！'
  }
}

export default messages

接下来，你需要创建一个 `src/styles/variables.scss` 文件来定义你的主题变量。例如：

$primary-color: #1890ff;
$success-color: #52c41a;
$info-color: #1890ff;
$warning-color: #faad14;
$error-color: #f5222d;

然后你需要在 `src/main.ts` 文件中引入这个文件：

import './styles/variables.scss'

接下来，你需要安装 `vite-plugin-style-import` 来支持按需加载 Element Plus 的样式。例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(router)
app.use(i18n)
app.mount('#app')

最后，你需要在 `vite.config.ts` 文件中添加以下配置来支持换肤功能：

import { UserConfig } from 'vite'

const config: UserConfig = {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "src/styles/variables.scss";
        `
      }
    }
  }
}

export default config

好了，现在你已经成功地使用 Vue3 + TypeScript + Element Plus + Axios + Router + Pinia + Vite 编译一个支持动态生成路由、国际化和换肤的项目了。