Question

如何利用vue组件 动态生成router-link

Answer 1

首先，Vue.component的第二个参数是一个配置对象，你这个写法连JS语法都不符合。
其次，template配置应该是一个HTML代码的字符串，所以改成：
Vue.component('sidebar', {
template: '<div><router-link to="/">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></div>'
});
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>可以被识别。

Answer 2

比如有这么个router需要跳转

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

你的router-link可以这么写

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

还可以用编程在代码里写，效果也一样：

router.push({ name: 'user', params: { userId: 123 }})

具体的推荐你看下vue router的官网，里面有详细的说明和例子