Nuxt3中vue-router配置及v-btn路由跳转失效问题求助

问题根源 #

1. Nuxt3内置了vue-router，无需手动创建并注册路由实例，手动注册会与内置路由冲突；且createWebHistory在服务端渲染环境中会访问不存在的window对象，触发报错。
2. Vuetify的VBtn组件依赖Vue Router的RouterLink.useLink方法，未正确接入Nuxt内置路由时会触发RouterLink.useLink is not a function错误。

解决步骤 #

1. 删除自定义路由插件 #

立即移除你手动编写的引入createRouter的插件文件，Nuxt3会自动管理路由实例，无需额外注册。

2. 正确配置Vuetify与Nuxt路由的集成 #

根据你的Vuetify集成方式选择对应配置：

方式一：使用@nuxtjs/vuetify模块

在nuxt.config.ts中开启路由集成：

export default defineNuxtConfig({
  modules: ['@nuxtjs/vuetify'],
  vuetify: {
    routerIntegration: true // 让Vuetify自动使用Nuxt内置路由
  }
})

方式二：手动编写Vuetify插件

在plugins/vuetify.ts中配置Vuetify，无需手动注入路由（Nuxt会自动将内置路由注入到Vue实例中）：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })
  nuxtApp.vueApp.use(vuetify)
})

然后在nuxt.config.ts中注册该插件：

export default defineNuxtConfig({
  plugins: ['~/plugins/vuetify.ts']
})

3. 保留原VBtn代码 #

你的VBtn代码无需修改，现在Vuetify会通过Nuxt内置路由处理跳转：

<v-btn to="/create" depressed class="btn_text" color="grey darken-4">
  Create Order
</v-btn>

4. 确认依赖版本 #

确保安装的Vuetify版本为^3.x，@nuxtjs/vuetify（如果使用）适配Nuxt3，避免版本不兼容问题。

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