[Vue 警告]:未知的自定义元素:<router-view>- 您是否正确注册了组件?

[Vue warn]: Unknown custom element: lt;router-viewgt; - did you register the component correctly?([Vue 警告]:未知的自定义元素:lt;router-viewgt;- 您是否正确注册了组件?)

本文介绍了[Vue 警告]:未知的自定义元素:<router-view>- 您是否正确注册了组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 CLI 模式下使用 Vue 2 和 webpack-simple.我有以下文件:

main.js:

从'vue'导入Vue;从'./App.vue'导入应用程序;从'vue-router'导入VueRouter;从'./routes'导入路线;Vue.use('VueRouter');常量路由器 = 新的 VueRouter({路线:路线,});新的 Vue({埃尔:'#app',渲染:h =>h(应用程序),路由器:路由器,});

App.vue:

<template>

<路由器视图></路由器视图></div></模板><脚本>从'./Loader.vue'导入加载器;导出默认{名称:'应用程序',}</脚本><style lang=scss"></风格>

routes.js:

import Game from './components/Game.vue';从'./components/Login.vue'导入登录;导出默认 [{ 路径:'/',组件:游戏,名称:游戏";},{ 路径:'/login',组件:登录,名称:登录";},]

Game.vue 和 Login.vue 看起来一样:

<template>

游戏</div></模板><脚本>导出默认{名称:'游戏',}</脚本><style lang=scss">分区 {边框:1px 纯红色;宽度:100px;高度:100px;}</风格>

不幸的是,启动一个文件给我一个错误:

<块引用>

[Vue 警告]:未知的自定义元素:- 你注册了吗组件正确吗?对于递归组件,请确保提供姓名";选项.

router-view 标记也未更改为正确的 html.我第一次使用vue路由器.它是在 3.0.1 版本中通过 npm 安装的

有什么建议吗?

解决方案

你需要做到以下几点:

从'vue'导入Vue;从'vue-router'导入VueRouter;Vue.use(VueRouter);

参考:https://router.vuejs.org/en/installation.html

new Vue({el:#app",路由器:路由器,渲染:h =>h(应用程序),})

希望对你有帮助

I use Vue 2 in CLI mode with webpack-simple. I have following files:

main.js:

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
    
Vue.use('VueRouter');
    
const router = new VueRouter({
  routes: Routes,
});
    
new Vue({
  el: '#app',
  render: h => h(App),
  router: router,
});

App.vue:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
    
<script>
import Loader from './Loader.vue';
    
export default {
  name: 'app',
}
</script>
    
<style lang="scss">
</style>

routes.js:

import Game from './components/Game.vue';
import Login from './components/Login.vue';
    
export default [
  { path: '/', component: Game, name: "Game" },
  { path: '/login', component: Login, name: "Login" },
]

Game.vue and Login.vue looks the same:

<template>
  <div>
    Game
  </div>
</template>
    
<script>
export default {
  name: 'game',
}
</script>
    
<style lang="scss">
div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
</style>

unfortunately starting a file gives me an error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Also router-view tag is not changed to proper html. I use vue router for the first time. It' been installed via npm in version 3.0.1

Any advice?

解决方案

You need to do the following:

import Vue from 'vue';
import VueRouter from 'vue-router';
    
Vue.use(VueRouter);

Ref: https://router.vuejs.org/en/installation.html

new Vue({
  el: "#app",
  router: router,
  render: h => h(App),
})

Hope it will help you

这篇关于[Vue 警告]:未知的自定义元素:&lt;router-view&gt;- 您是否正确注册了组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:[Vue 警告]:未知的自定义元素:&lt;router-view&gt;- 您是否正确注册了组件?

基础教程推荐