Vue界面跳转传递参数

在Vue中实现屏幕间参数传递，可以使用vue-router的路由参数传递。以下是一个简单的例子：

1. 定义路由：

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import HomePage from './components/HomePage.vue';
import DetailPage from './components/DetailPage.vue';
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/detail/:id', // 动态路由参数
      name: 'detail',
      component: DetailPage
    }
  ]
});

2. 在HomePage.vue中，使用$router.push来传递参数：

// HomePage.vue
<template>
  <div>
    <button @click="goToDetailPage(123)">Go to Detail Page</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToDetailPage(id) {
      this.$router.push({ name: 'detail', params: { id } });
    }
  }
};
</script>

3. 在DetailPage.vue中接收参数：

// DetailPage.vue
<template>
  <div>
    <p>Detail Page with ID: {{ $route.params.id }}</p>
  </div>
</template>
 
<script>
export default {
  created() {
    console.log('Received ID:', this.$route.params.id);
  }
};
</script>

在这个例子中，当用户点击按钮时，HomePage组件通过$router.push方法将参数id传递给DetailPage组件，在DetailPage组件中通过$route.params.id来接收传递的参数。