今天笔者在研究vue-router的时候踩到了一个小坑，这个坑是这样的
笔者的具体代码如下：
router.js
import Home from ‘@/components/Home.vue‘; import Component1 from ‘@/components/component1.vue‘; const routes = [ { path: ‘/component1‘, name:‘component1‘, component: Component1 }, ] export default routes
main.js
import Vue from ‘vue‘; import App from ‘./App.vue‘; import VueRouter from ‘vue-router‘; import Routes from ‘@/router/router.js‘ Vue.config.productionTip = true; const router = new VueRouter({ routes: Routes, mode: "history" }) new Vue({ render: h => h(App), router: router }).$mount(‘#app‘);
component1.vue
<template> <div class="component1"> <h1>{{message}}1</h1> </div> </template> <script> export default { name: ‘componnent1‘, data () { return { message: "hello vue-router" }; } } </script> <style scoped> </style>
百度报错原因，发现没有在main.js上面原来是没有手动调用Vue.use(VueRouter)。以前习惯了在文件头部直接引入vue.js和vue-router.js，这种方式下，在vue-router内部会检测window.Vue对象是否存在，如果存在就会自动调用Vue.use()方法，否则需要手动调用Vue.use(VueRouter)来确保路由插件注册到Vue中。在支持AMD环境中，Vue对象并不会暴露到全局window对象中，而是会通过define()形式输出和引入，因此需要手动注册。(具体原因拷贝自博客：https://blog.csdn.net/zhangxuekang/article/details/79738820 。尊重原创，侵删。)
在mian.js上面加入Vue.use(VueRouter)就不会报错了…
转: https://blog.csdn.net/luciferms/article/details/83792402
vue-router踩坑日记Unknown custom element router-view
原文：https://www.cnblogs.com/fps2tao/p/12033315.html