javascript - 如何利用vue組件 動態生成router-link

問題描述

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>’)//之后再執行VueRouter目前的問題

雖然這樣可行，但是在vue-router執行之前會報一個組件未注冊的錯誤，請教各位大大有沒有更好的動態實現方式

如上所示，需要動態生成側邊路由，然后執行vue-router去解析，但是會出錯，無法理解怎么就出錯了

原因是vue-router會自動去解析router-link，即使沒有VueRouter實例

問題解答

首先，Vue.component的第二個參數是一個配置對象，你這個寫法連JS語法都不符合。

其次，template配置應該是一個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...）

針對你說的都是引入的情況，代碼做如下修改：先按如下順序依次引入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里面注冊VueRouter，這樣可以在Vue里面使用`<router-link>`Vue.use(VueRouter);// 下面這一段是路由設置和應用根元素綁定，具體可以參照官方文檔// -----------------------------------var routes = [ ... ]; // 這個是路由的配置，你自己寫// 定義路由VueRouter控件，其中，`{routes}`是`{routes: routes}`的簡寫，可能是ES6里面的新語法var router = new VueRouter({routes});// 創建Vue對象var app = new Vue({ el: ’#app’, // 假設綁定的根元素為#app router, // 此處也是簡寫});

然后可以使用Vue.component()語句了，此時，因為注冊了Vue-Router組件，<router-link>可以被識別。