vue带参数跳转新页面

Vue.js 中，如果你想从当前页面带参数跳转到新的页面（通常是路由跳转），你可以使用 Vue Router 这个库。Vue Router 提供了 `this.$router.push` 或者 `this.$router.go` 方法来导航到指定的路由。

例如，假设你有一个动态路由，路径是 `/detail/:id`，你可以这样做：

// 在组件内部
this.$router.push({ name: 'detail', params: { id: '某个值' } });

// 或者直接传入路径字符串，如果是SPA应用
this.$router.push('/detail/' + '某个值');

// 如果你想使用动态参数
let id = '123'; // 这里替换成实际的参数值
this.$router.push(`/detail/${id}`);

这会将用户带到 `/detail/某个值` 的页面，并且可以获取到通过 `:id` 映射的参数值。

相关问题

vue超链接带参数跳转新页面

在Vue.js中，如果你想通过超链接带参数跳转到一个新的页面，通常你会使用`router-link`组件配合Vue Router库。首先，你需要安装Vue Router并配置好路由。然后，在HTML模板中，你可以这样做：

<router-link :to="{ name: 'yourRouteName', params: { paramKey: 'paramValue' }}" target="_blank">
  点击这里
</router-link>

在这个例子中，`yourRouteName`是你要导航的目标路由名，`paramKey`是参数的键，`paramValue`是你想要传递的实际值。`target="_blank"`用于新开窗口跳转。

vue2路由跳转新页面携带参数

在 Vue 2 中，如果你想要通过路由跳转到新的页面并传递参数，你可以使用 `this.$router.push` 或者 `this.$router.go` 方法，并配合动态路由参数。这里是一个基本的例子：

// 在某个组件内部，假设有一个按钮点击事件
this.$router.push({
  name: 'targetPage', // 如果是按照命名路由跳转
  params: { // 这里是你要传递的参数对象
    id: 'parameter_value' // 参数名和值
  }
})

// 或者直接指定路径和参数
this.$router.push('/path/:paramName/value') // 使用动态路由，`:paramName` 将会被实际参数替换

// 如果你想使用 go 方法（不会添加历史记录）
this.$router.go({
  path: '/new-page?param=value' // 查询字符串形式传递参数
})

在目标页面（例如，`TargetPage.vue`）中，可以接收这些参数：

<template>
  <div>
    <h1>Target Page</h1>
    {{ $route.params.id }}
  </div>
</template>

<script>
export default {
  computed: {
    paramValue() {
      return this.$route.params.id;
    }
  }
}
</script>