vue跳转页面携带参数并接收

在 Vue 中，可以通过使用路由的方式来实现页面跳转并携带参数。下面是一个示例：

1. 在路由配置文件中定义需要传递参数的路由：

// router.js

import Vue from 'vue';
import Router from 'vue-router';
import MyComponent from './components/MyComponent.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/my-component/:id', // 使用冒号定义参数
      name: 'MyComponent',
      component: MyComponent
    }
  ]
});

2. 在源页面中进行跳转并传递参数：

// SourceComponent.vue

export default {
  methods: {
    goToMyComponent() {
      const id = 1; // 假设传递的参数为1
      this.$router.push({ name: 'MyComponent', params: { id } });
    }
  }
};

3. 在目标页面中接收参数：

// MyComponent.vue

export default {
  mounted() {
    const id = this.$route.params.id;
    // 根据传递的参数id进行相关逻辑处理
  }
};

通过以上步骤，源页面可以跳转到目标页面并携带参数，目标页面可以通过 `$route.params` 获取传递的参数进行后续处理。