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)就不會報錯了…

 

 

 

 

轉: https://blog.csdn.net/luciferms/article/details/83792402