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

Question

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

如果我像“ .vue”文件中那样导入该组件“原始”文件，则可以正常工作，并且路由器状态已同步并且链接可以正常工作。

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

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

Answer 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可以正常工作！