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

Question

{Code...} Although the current problem is feasible, an error that the component is not registered will be reported before vue-router is executed. I would like to ask if you have a better dynamic implementation method. Original problem↓ As shown above, it needs to be dynamically generated. Side routing, and then execute vue-router to parse, but something will appear...

大家讲道理 · Answer

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: 'Go to FooGo to Bar'
});

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

Then add the following JS

// 在Vue里面注册VueRouter，这样可以在Vue里面使用``
Vue.use(VueRouter);

// 下面这一段是路由设置和应用根元素绑定，具体可以参照官方文档
// -----------------------------------
var routes = [ ... ]; // 这个是路由的配置，你自己写

// 定义路由VueRouter控件，其中，`{routes}`是`{routes: routes}`的简写，可能是ES6里面的新语法
var router = new VueRouter({routes});

// 创建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, can be recognized.

Current Issues

Original question↓

Update