this.$router.push({ params: { id: id }}); 怎么在另一个vue界面里调用id值

在Vue中，当你使用`this.$router.push`将URL参数（包括动态路由参数params中的id）推送到另一个页面时，你在目标页面中通常会通过访问路由查询字符串或参数来获取这个id值。以下是如何在另一个Vue界面（假设是一个名为`OtherComponent.vue`的组件）中获取id：

<template>
  <div>
    <!-- 获取id的位置 -->
    <p>ID: {{ getIdFromRoute }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    // 使用router提供的meta属性来获取route参数，如果没有，还可以用matched或params
    getIdFromRoute() {
      return this.$route.params.id; // 在当前组件内部，params.id就是之前传递过来的id
    }
  },
}
</script>

在这个例子中，我们在组件的计算属性`getIdFromRoute`中获取`id`。当路由改变并且带有一个`id`参数时，这个计算属性会被自动刷新并显示对应的id值。

如果id是从之前的页面通过路由参数传递过来的，那么只要新页面能访问到路由信息，它就能获取到这个id。

相关问题

vue3 this.$router.push()params传参

在 Vue3 中，`this.$router.push()` 方法用于导航到一个新的路由。如果你想通过 `params` 参数传递数据，可以在方法调用时传递一个对象作为参数。`params` 是一种特殊的数据类型，它会被附加到路由路径上，通常用于表示动态路由的部分。

例如：

// 假设你的路由配置里有一个动态部分，如 /users/:userId
const userId = '123'; // 这是你想要传递的用户ID

// 使用 $router.push()
this.$router.push({
  path: '/users/:userId', // 动态路由
  params: { userId } // 传递参数
});

在这个例子中，当你访问 `/users/123`，`userId` 的值就会被注入到页面的 URL 中，并可以在目标组件中通过 `$route.params.userId` 访问到这个参数。

vue this.$router.push

`this.$router.push` 是 Vue.js 中用于进行路由导航的方法。它用于在当前路由上进行导航到不同的页面。

使用 `this.$router.push` 方法可以传入一个路由对象或者一个路径字符串，示例如下：

// 导航到命名路由
this.$router.push({ name: 'routeName' });

// 导航到带有参数的路由
this.$router.push({ path: '/route/path', params: { id: 1 } });

// 导航到指定 URL
this.$router.push('/route/path');

在 Vue 组件中，`this.$router` 可以访问到 Vue Router 的实例，通过调用 `push` 方法来进行页面导航。