Vuejs：数据通过router-view

Question

通过 router-view 传递数据是个好习惯吗？我有一个嵌套路由器，一些 children 必须能够访问 parent 拥有的数据。我知道 Vuex 是在整个应用程序中传递数据的方式，但我想知道将数据绑定到 router-view 以使其在 child 组件中可用的确切缺点是什么。所以现在我有这样的东西：

<router-view v-bind:list="array" />

Answer 1

您可以使用 router-view 将数据传递给呈现的组件，但很可能不是您想要的。

路由可以从应用程序的任何部分发生，但如果您通过 router-view 传递信息，则需要更新绑定到视图的数据，这反过来意味着可以访问包含的组件呈现 router-view 的模板。这最终会紧密耦合组件或使用 bus/vuex.

您可以使用 Vuex 来传递信息，但是在路由时传递信息的方法要简单得多。

你可以定义你的路由来转换路由到组件的道具时设置的参数。更多信息 here。这意味着您可以进行类似于此的调用：

<router-link :to="{ name: 'routeName', params: { id: 1 }}">Go to route</router-link>

然后为 routeName 注册的任何组件都会将属性 id 设置为值 1。如果您以编程方式触发导航，也会发生同样的情况。

Answer 2

您可以像下面这样以编程方式通过路由器在点击或重定向时从父组件触发 fn 下面

this.$router.push({
      name: 'ChildRouteName',
      params: {'type':'name', 'id': '1',}
})

并且在子组件中接收这样的参数

type = this.$route.params['type']
id = this.$route.params['id']

Vuejs：数据通过router-view

Vuejs: data through the router-view

vue.js

vue-router

vuejs2