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

巴特西

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

最新文章

热门文章