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

Posted 2023-04-19

首先，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>可以被识别。 参考技术A

比如有这么个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的官网，里面有详细的说明和例子

带有<router-link>的自定义Vue库组件，如何同步路由器状态？

【中文标题】带有<router-link>的自定义Vue库组件，如何同步路由器状态？

【英文标题】：Custom Vue library component with <router-link>, how to synchronize router state?

【发布时间】：2018-10-04 07:01:05

【问题描述】：

我正在尝试创建一个可重用的导航组件，它使用 vue-router <router-link> 进行导航。特定的导航元素还会根据活动链接更改样式。

如果我像在 .vue 文件中一样“原始”地导入这个组件，它工作正常，路由器状态同步，链接工作。

但是，如果我构建组件并将它们导出为库（使用 webpack），我的路由将停止工作。组件的所有其他功能、脚本、事件、属性、样式等等。

这会是我的 webpack 构建配置的问题，还是我需要传递某种类型的属性，可以将我的应用程序的状态链接到我的组件？

【参考方案1】：

所以，我找到了正确的方法。这不是同步状态的问题，但更多的是我以“愚蠢”的方式导出我的组件，而不是连接到我的消费应用程序：

export default 
  MyNavComponent,
  AnotherComponent,
  ...

为了解决这个问题，我将组件库转换为插件：

const components = 
  MyNavComponent,
  AnotherComponent,
  ...
;

//Export in the form of a plugin instead
export default 
  install: function (Vue) 
    console.log('Installing vue components!');

    _.each(components, function (component) 
      Vue.component(component.name, component);
    );
  
;

然后在我的消费应用中：

import MyComponents from 'my-component-package/dist/components.min'

Vue.use(MyComponents)

new Vue(....)

我的router-links 现在可以完美运行了！