Vue项目中Vue Router注册错误：<router-link>组件无法识别求助

你安装的vue-router@4是Vue 3专属版本，但你的代码完全是Vue 2的写法（import Vue from 'vue'、new Vue({...})），两者不兼容，这是导致所有报错的核心原因。

方案一：降级Vue Router适配Vue 2 #

如果想继续使用Vue 2，需要安装Vue Router 3.x兼容版本：

1. 卸载当前版本：

npm uninstall vue-router

2. 安装3.x版本：

npm install vue-router@3

3. 修改main.js的路由配置（适配Vue Router 3的写法）：

import Vue from 'vue'
import App from './App.vue'

// Router
import VueRouter from 'vue-router';
import StartNovice from './components/Novice/StartNovice';

const routes = [
  {
    path: '/novice',
    name: 'novice',
    component: StartNovice
  }
]

// Vue Router 3通过new创建实例，hash模式对应mode: 'hash'
const router = new VueRouter({
  mode: 'hash',
  routes
})

Vue.use(VueRouter);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

方案二：升级到Vue 3适配Vue Router 4 #

如果想保留Vue Router 4，需要将项目升级到Vue 3，并调整代码写法：
修改main.js为Vue 3的格式：

// Vue 3的导入方式
import { createApp } from 'vue'
import App from './App.vue'

// Router
import * as VueRouter from 'vue-router';
import StartNovice from './components/Novice/StartNovice';

const routes = [
  {
    path: '/novice',
    name: 'novice',
    component: StartNovice
  }
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

// Vue 3通过createApp创建实例，再调用use挂载路由
const app = createApp(App)
app.use(router)
app.mount('#app')

• 用Vue Router 4配合Vue 2：Vue 3的插件机制与Vue 2不同，Vue.use(VueRouter)无法正确注册<router-link>和<router-view>组件，因此出现未知元素警告。
• 改成Vue.use(router)：Vue Router 4的实例不符合Vue 2的插件格式，直接传入会导致内部逻辑报错，触发Cannot set properties of undefined。

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