Vue3集成unplugin-vue-router时router.push报错的解决及配置咨询

一、修复Cannot find name 'router'错误 #

Vue3中无法直接使用全局router变量，需要通过vue-router提供的useRouter组合式函数获取路由实例，具体改写如下：

组合式API（<script setup>）示例 #

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 获取路由实例
const router = useRouter();
// 替换为你的登录状态判断逻辑（比如从Pinia、localStorage读取）
const loggedIn = /* 你的登录状态值 */;

onMounted(() => {
  if (loggedIn) {
    router.push('/projects');
  }
});
</script>

选项式API示例 #

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  setup() {
    const router = useRouter();
    const loggedIn = /* 登录状态 */;

    onMounted(() => {
      if (loggedIn) {
        router.push('/projects');
      }
    });

    return { loggedIn };
  },
});
</script>

二、unplugin-vue-router的配置位置 #

unplugin-vue-router的配置位置取决于你使用的构建工具：

1. Vite项目 #

配置文件为项目根目录下的vite.config.ts，需导入插件并添加到plugins数组：

// vite.config.ts
import { defineConfig } from 'vite';
import Vue from '@vitejs/plugin-vue';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: 'src/pages', // 路由文件存放目录，默认值为src/pages
      dts: 'src/typed-router.d.ts', // 生成TypeScript类型声明文件的路径
    }),
    Vue(),
  ],
});

2. Webpack/Vue CLI项目 #

配置文件为项目根目录下的vue.config.js（Vue CLI）或webpack.config.js（Webpack）：

// vue.config.js
const { defineConfig } = require('@vue/cli-service');
const VueRouter = require('unplugin-vue-router/webpack');

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      VueRouter({
        routesFolder: 'src/pages',
        dts: 'src/typed-router.d.ts',
      }),
    ],
  },
});

注意：配置完成后，需确保tsconfig.json的include数组中包含生成的typed-router.d.ts文件，以获得完整的TypeScript类型支持。

内容的提问来源于stack exchange，提问作者Hugo Pedro