Vue路由场景下如何向Home组件传递voltage数据？

方法1：通过query参数传递（刷新页面数据不丢失） #

把当前的声明式跳转改成带query参数的形式，给v-list-tile的:to绑定对象：

<v-list-tile :to="{ name: 'home', query: { voltage: voltage } }">
  <v-list-tile-action>
    <v-icon>home</v-icon>
  </v-list-tile-action>
  <v-list-tile-content>
    <v-list-tile-title>Home</v-list-tile-title>
  </v-list-tile-content>
</v-list-tile>

在Home组件里，直接通过this.$route.query.voltage就能拿到传递的voltage值。如果想通过props接收（更符合组件化规范），可以修改路由配置：

{
  path: '/',
  name: 'home',
  component: Home,
  props: route => ({ voltage: route.query.voltage })
}

然后在Home组件里定义props：

export default {
  props: ['voltage'],
  // ...其他代码
}

方法2：通过路由params传递（刷新页面数据会丢失，适合临时传值） #

先修改路由配置，添加动态可选参数：

{
  path: '/:voltage?', // 问号表示参数可选，不跳转时也能正常访问首页
  name: 'home',
  component: Home,
  props: true // 开启props自动接收路由参数
}

然后修改跳转的v-list-tile：

<v-list-tile :to="{ name: 'home', params: { voltage: voltage } }">
  <!-- 内容不变 -->
</v-list-tile>

之后在Home组件里直接通过props接收：

export default {
  props: ['voltage'],
  // ...其他代码
}

如果不想修改路由，也可以直接在Home组件里用this.$route.params.voltage获取，但这种方式耦合性更高，不推荐。

方法3：用Vuex共享数据（适合全局需要用到的场景） #

如果你的项目已经引入了Vuex，直接把voltage存到全局状态里：

1. 在Vuex的store中定义state和mutation：

const store = new Vuex.Store({
  state: {
    voltage: '0'
  },
  mutations: {
    SET_VOLTAGE(state, value) {
      state.voltage = value
    }
  }
})

2. 在当前组件把声明式跳转改成编程式导航，点击时先更新状态再跳转：

<v-list-tile @click="goToHome">
  <!-- 内容不变 -->
</v-list-tile>

methods: {
  goToHome() {
    this.$store.commit('SET_VOLTAGE', this.voltage)
    this.$router.push({ name: 'home' })
  }
}

3. 在Home组件里通过mapState获取全局状态：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['voltage'])
  },
  // ...其他代码
}

内容的提问来源于stack exchange，提问作者Curious99