Vue中<router-view>及自定义组件未注册报错问题求助

Hey there! Let's break down why you're hitting that <router-view> warning and fix it step by step. From the code snippets you shared, there are a handful of small but critical issues causing this problem:

1. Vue Router isn't properly imported or initialized #

First off, you've got a typo in your Vue Router import, and you're missing the essential step to tell Vue to use the router plugin:

• Your current import has a typo: import ueRouter from 'vue-router' → this should be import VueRouter from 'vue-router'
• You need to add Vue.use(VueRouter) right after importing VueRouter—this is what registers <router-view> and other router-related components globally in your app
• Finally, you need to create a router instance using your routes config and pass it to your root Vue instance

2. Component registration typos #

You've got a couple of mistakes in how you're registering your custom components:

• For vue-header: You're trying to register it with Header, but there's no import for that component. Make sure you first import it (e.g., import Header from './Header.vue') before registering it.
• For vue-generic: You wrote eneri instead of Generic—that should be Vue.component('vue-generic', Generic)

Corrected Example Code #

Here's what your entry file (likely main.js) should look like after fixing all these issues:

import Vue from 'vue'
import App from './App.vue'
import Header from './Header.vue' // Added missing import
import Generic from './Generic.vue'
import ABC from './abc.vue'
import VueRouter from 'vue-router' // Fixed typo
import { routes } from './router.js'

// Tell Vue to use the Router plugin
Vue.use(VueRouter)

// Register your components correctly
Vue.component('vue-header', Header)
Vue.component('vue-generic', Generic)
Vue.component('vue-abc', ABC) // Optional: if you want to register ABC globally

// Create router instance
const router = new VueRouter({
  routes // Shorthand for routes: routes
})

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

Once you make these changes, the <router-view> warning should disappear, since Vue will now recognize it as a valid component from Vue Router.

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