如何使用webpack跨Vue.js中的路由组件共享数据？

因此，我正试图思考如何使用

vue加载器

作为网页包，如何使用

vue路由器

作为路由，以及如何拥有共享数据模型。我的理解是，您创建一个数据模型，然后将其传递到每个组件，并认为它们具有共享状态。您似乎还应该使用数据模型而不是道具，因为这允许双向绑定

我试过一些方法，但似乎都不管用。我试着在路由器中传递

数据

，但没有解决问题

我把它作为我的主

app.js

：

var $ = require('jquery'),
    Vue = require('vue'),
    VueRouter = require('vue-router');

Vue.use(VueRouter);

var first = require('vue!./first.vue');
var second = require('vue!./second.vue');

var sourceOfTruth = {
    msg: "my message"
};

var App = new Vue({
  data: sourceOfTruth,
});

var router = new VueRouter({
    history: true
});

router.map({
    '/foo': {
        data: sourceOfTruth,
        component: first
    },
    '/bar': {
        data: sourceOfTruth,
        component: second
    }
});

router.start(App, '#app');

这是我的第一个

。vue

：

<template>
    The message goes here -> {{ msg }}
</template>

<script type="text/javascript">
    // ???
</script>

消息在这里->{{msg}
// ???

---

有什么想法吗？谢谢

通过发送的自定义数据字段不像组件数据字段那样被访问。您正在尝试

{{msg}

，这将在组件中查找

msg

字段

要访问通过路由器发送的数据

{{$route.data}}

现在，因为在您的例子中，数据反过来是json，所以您可以这样做

{{$route.data.msg}}

查看有关独立组件之间通信的非常好的文章。这也是对

Flux

思维方式的介绍。一般来说，您应该可以使用共享存储实例，在共享存储实例中，您可以从一个单独的文件中为每个组件导入它，并通过分配给每个组件的数据使其具有响应性

<template>
    {{ sourceOfTruth.msg }}
</template>

<script>
    import store from '../store'

    export default {
       data () {
          return {
            sourceOfTruth : store.sourceOfTruth 
         }
      } 
   }
</script>

{{sourceOfTruth.msg}}
从“../store”导入存储
导出默认值{
数据（）{
返回{
sourceOfTruth:store.sourceOfTruth
}
} 
}
要求（'vue！/second.vue'）介意解释一下它的功能吗？我指的是点之前的部分。@YauheniPrakopchyk我想这就是您使用webpack时的要求。@notANerdDev谢谢您的解释。@notANerdDev是正确的-它强制webpack使用
vue loader
加载文件。谢谢！这篇文章真的很有帮助，Vuex似乎很有希望。