Vue 中路由页面传值 一、通过路由传参 Vue 路由是一种常见的页面导航和参数传递方式。可以通过路由的方式在页面之间传递参数。

通过路由参数传值：可以通过路由的动态参数或查询参数传递数据。在源页面设置参数，然后在目标页面通过 $route.params 或 $route.query 访问参数。 示例代码：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/source/:id',
      component: SourceComponent,
    },
    // 其他路由配置...
  ],
});

// 源页面
<template>
  <router-link :to="{ path: '/source/1' }">跳转到目标页面</router-link>
</template>

// 目标页面
<template>
  <div>
    <p>参数传递的值：{{ $route.params.id }}</p>
  </div>
</template>

通过路由状态传值：可以通过路由的状态对象传递数据。在源页面设置状态对象，然后在目标页面通过 $route.meta 访问状态对象。 示例代码：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/source',
      component: SourceComponent,
      meta: {
        data: {
          id: 1,
          name: 'John',
        },
      },
    },
    // 其他路由配置...
  ],
});

// 目标页面
<template>
  <div>
    <p>参数传递的值：{{ $route.meta.data.id }}</p>
  </div>
</template>