Vue2路由配置求助：路由无法切换且<router-view>未识别

你的问题核心是混淆了Vue 2和Vue 3的vue-router用法，导致路由未正确注册，进而出现inject()警告和<router-view>未识别的错误。以下是具体修复步骤：

错误原因分析 #

• Vue 2对应的vue-router版本是vue-router@3.x，需使用VueRouter构造函数初始化路由，而非Vue 3专属的useRoute组合式API钩子。
• 你错误地将useRoute当作插件注册，且在Vue实例中传入了错误的选项名，导致路由全局组件未被正确注册。

修改后的代码 #

1. Main.js #

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入正确的路由实例

Vue.config.productionTip = false

new Vue({
  router, // 通过router选项挂载路由实例
  render: h => h(App),
}).$mount('#app')

2. Router.js #

import Vue from 'vue'
import VueRouter from 'vue-router' // 导入VueRouter（适配Vue 2的版本）
import Home from './components/Home.vue'
import LoginPage from './components/Login.vue'

// 注册VueRouter插件，确保全局组件生效
Vue.use(VueRouter)

// 初始化路由实例
export default new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: LoginPage }
  ]
})

关键修改点 #

• 替换useRoute为VueRouter：Vue 2中必须使用VueRouter构造函数创建路由实例，useRoute是Vue 3的专属API，无法在Vue 2环境中正常工作。
• 正确挂载路由：在Vue实例中通过标准的router选项传入路由实例，而非自定义的useRoute选项。
• 全局注册路由插件：通过Vue.use(VueRouter)完成插件注册，确保<router-view>、<router-link>等全局组件被Vue识别。

修改完成后，访问/和/login即可正常切换页面，控制台的两个警告也会消失。

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