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

Posted 2023-02-23

【中文标题】带有<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 现在可以完美运行了！