Unknown custom element: ＜router-view＞

 

问题

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option

原因

Vue 2 和 Vue Router 4 是不兼容的。Vue Router 4 是专门为 Vue 3 设计的，而 Vue 2 需要使用 Vue Router 3。如果你在 Vue 2 项目中使用了 Vue Router 4，会导致各种问题，包括 <router-view> 未知自定义元素的问题。

解决方案

• 确保使用 Vue Router 3：如果你正在使用 Vue 2，你需要安装并使用 Vue Router 3。
• 安装 Vue Router 3：

npm install vue-router@3
# 或者
yarn add vue-router@3

• 配置 Vue Router 3：以下是一个完整的示例，展示如何在 Vue 2 项目中配置和使用 Vue Router 3。

项目结构

sangbiao-vue-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── package.json
└── babel.config.js

package.json

确保你的 package.json 中有正确的依赖项：

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0"
  }
}

src/main.js

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

Vue.config.productionTip = false;

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

src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

src/App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 你的样式 */
</style>

src/components/Home.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
/* 你的样式 */
</style>

src/components/About.vue

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style scoped>
/* 你的样式 */
</style>

 通过以上步骤，可以确保在 Vue 2 项目中正确地使用 Vue Router 3。这样可以避免 <router-view> 未知自定义元素的问题，并且确保你的路由配置和组件能够正常工作。