Vue.js - 未知的自定义元素：<router-view>

Posted 2023-02-22

【中文标题】Vue.js - 未知的自定义元素：<router-view>

【英文标题】：Vue.js - Unknown custom element: <router-view>

【发布时间】：2019-08-11 11:25:42

【问题描述】：

我对 Vue.js 有点陌生，我正在尝试实现到应用程序的路由，但由于某种原因，我遇到了一个问题：

未知的自定义元素：<router-view> - 您是否注册了组件 正确吗？对于递归组件，请确保提供“名称”选项

我是否错误地注册了组件？非常感谢任何帮助，我的代码如下：

app.js

import Vue from 'vue'
import AppLayout from './theme/Layout.vue'
import router from './router'

const app = new Vue(
  router,
  ...AppLayout
)

export  app, router 

路由器.js

import Vue from 'Vue'
import VueRouter from 'vue-router'
import Category from './theme/Category.vue'
import Login from './theme/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter(
  routes: [
    path: '/', component: Category,
    path: '/login', component: Login
  ]
)

导出默认路由器

布局.vue

 <template>
  <div>
    <app-header></app-header>
    <section class='main-section section'>
      <div class='container content'>
        <router-view></router-view>
      </div>
    </section>
    <app-footer></app-footer>
  </div>
</template>
<script>
import AppHeader from './AppHeader.vue'
import AppFooter from './AppFooter.vue'
export default 
  components: 
    'app-header': AppHeader,
    'app-footer': AppFooter
  

</script>
<style lang='scss'>
$primary: #287ab1;
@import '~bulma';

</style>

我正在关注这个人的代码Here 和他的course

【问题讨论】：

将...AppLayout 更改为render: h => h(AppLayout) 会发生什么？

@Daniel 同样的问题

【参考方案1】：

看起来Vue.use(VueRouter) 没有做它的事情......

这可能是由于您的 Vue 导入时区分大小写。

import Vue from 'Vue'  // <--- should be 'vue' NOT 'Vue'
import VueRouter from 'vue-router'
import Category from './theme/Category.vue'
import Login from './theme/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter(
  routes: [
    path: '/', component: Category,
    path: '/login', component: Login
  ]
)

【讨论】：

准点！，新鲜的眼睛总是有帮助的，非常感谢您的时间。

@Daniel：为什么Vue.use() 没有导致错误？

我不知道¯\_(ツ)_/¯