Question

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

如果我导入此组件＆＃34; raw＆＃34;，就像在.vue文件中一样，这样可以正常工作并且路由器状态是同步的，并且链接可以正常工作。

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

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

Answer 1

所以，我发现了如何以正确的方式做到这一点。这并不是同步状态的问题，但更多的是我将我的组件导出为“愚蠢的”＃34;方式，没有连接到我的消费应用程序：

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现在完美无缺！

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

1 个答案: