vue-router踩坑日记Unknown custom element router-view

今天笔者在研究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)就不会报错了…