Vue.js：通过路由器视图查看数据

Question

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

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

Answer 1

您可以通过编程方式通过路由器，如下所示  点击或重定向后，fn下方的父组件触发

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

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

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

Answer 2

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

路由可以在应用程序的任何部分进行，但是如果您通过router-view传递信息，则需要更新绑定到视图的数据，这又意味着可以访问封装模板的组件显示router-view。这样最终会紧密耦合组件或使用总线/ Vuex。

您可以使用Vuex传递信息，但是在路由时，有一种更简单的传递信息的方法。

您可以定义路线以变换在传递到道具的零件时设置的参数。更多信息here。这意味着您可以拨打与此类似的电话：

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

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