亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Community

Learn

Tools Library

AI Tools

Leisure

English

javascript - How to use vue components to dynamically generate router-link

過去多啦不再A夢 2017-06-26 10:53:30

998

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

Current Issues

Although this is feasible, an error that the component is not registered will be reported before vue-router is executed. I would like to ask you if there is a better dynamic implementation method

Original question↓

As shown above, it is necessary to dynamically generate side routes, and then execute vue-router to parse, but an error will occur. I cannot understand why the error occurred

The reason is that vue-router will automatically parse router-link, even if there is no VueRouter instance

過去多啦不再A夢

reply all(1)

大家講道理2017-06-26 10:55:30 1 floor

First of all, the second parameter of Vue.component is a configuration object. Your way of writing it does not even comply with JS syntax.
Secondly, the template configuration should be a string of HTML code, so change it to:

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

Update

(Reference: https://router.vuejs.org/en/e...)

In view of the situation where you mentioned the introduction, the code is modified as follows:
First introduce Vue and Vue-router in the following order

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

Then add the following JS

// 在Vue里面注冊VueRouter，這樣可以在Vue里面使用`<router-link>`
Vue.use(VueRouter);

// 下面這一段是路由設置和應用根元素綁定，具體可以參照官方文檔
// -----------------------------------
var routes = [ ... ]; // 這個是路由的配置，你自己寫

// 定義路由VueRouter控件，其中，`{routes}`是`{routes: routes}`的簡寫，可能是ES6里面的新語法
var router = new VueRouter({routes});

// 創(chuàng)建Vue對象
var app = new Vue({
    el: '#app', // 假設綁定的根元素為#app
    router, // 此處也是簡寫
});

Then you can use the Vue.component() statement. At this time, because the Vue-Router component is registered, <router-link> can be recognized.

Like +0

Add Reply