問(wèn)題描述

Vue.component(’sidebar’, {template:’<p><router-link to='/'>Go to Foo</router-link><router-link to='/bar'>Go to Bar</router-link></p>’})var sidebar = new Vue({el: ’#sidebar’})// 加載router$(’head’).append(’<script src='https://cdn.bootcss.com/vue-router/2.6.0/vue-router.js'></script>’)//之后再執(zhí)行VueRouter目前的問(wèn)題

雖然這樣可行，但是在vue-router執(zhí)行之前會(huì)報(bào)一個(gè)組件未注冊(cè)的錯(cuò)誤，請(qǐng)教各位大大有沒(méi)有更好的動(dòng)態(tài)實(shí)現(xiàn)方式

如上所示，需要?jiǎng)討B(tài)生成側(cè)邊路由，然后執(zhí)行vue-router去解析，但是會(huì)出錯(cuò)，無(wú)法理解怎么就出錯(cuò)了

原因是vue-router會(huì)自動(dòng)去解析router-link，即使沒(méi)有VueRouter實(shí)例

問(wèn)題解答

首先，Vue.component的第二個(gè)參數(shù)是一個(gè)配置對(duì)象，你這個(gè)寫(xiě)法連JS語(yǔ)法都不符合。

其次，template配置應(yīng)該是一個(gè)HTML代碼的字符串，所以改成：

Vue.component(’sidebar’, { template: ’<p><router-link to='/'>Go to Foo</router-link><router-link to='/bar'>Go to Bar</router-link></p>’});Update

（參考資料：https://router.vuejs.org/en/e...）

針對(duì)你說(shuō)的都是引入的情況，代碼做如下修改：先按如下順序依次引入Vue和Vue-router

<script src='https://unpkg.com/vue/dist/vue.js'></script><script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>

然后加入如下JS

// 在Vue里面注冊(cè)VueRouter，這樣可以在Vue里面使用`<router-link>`Vue.use(VueRouter);// 下面這一段是路由設(shè)置和應(yīng)用根元素綁定，具體可以參照官方文檔// -----------------------------------var routes = [ ... ]; // 這個(gè)是路由的配置，你自己寫(xiě)// 定義路由VueRouter控件，其中，`{routes}`是`{routes: routes}`的簡(jiǎn)寫(xiě)，可能是ES6里面的新語(yǔ)法var router = new VueRouter({routes});// 創(chuàng)建Vue對(duì)象var app = new Vue({ el: ’#app’, // 假設(shè)綁定的根元素為#app router, // 此處也是簡(jiǎn)寫(xiě)});

然后可以使用Vue.component()語(yǔ)句了，此時(shí)，因?yàn)樽?cè)了Vue-Router組件，<router-link>可以被識(shí)別。