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

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

如果我导入此组件“raw”，如.vue文件，这工作正常，路由器状态是同步的，链接工作 .

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

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

1 回答

所以，我发现了如何以正确的方式做到这一点 . 这不是一个同步状态的问题，而是更多的是我以“愚蠢”的方式导出我的组件，而不是连接到我的消费App：

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

回复于 2024-04-29T08:10:47+08:00

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

1 回答

相关问题