vue3 路由传参不使用query 打开新页面

在 Vue3 中，可以使用 `params` 属性来进行路由参数传递。

首先，在定义路由时，在 `path` 中添加参数占位符，例如：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

然后，在使用 `router-link` 或者编程式导航时，可以通过 `params` 属性传递参数，例如：

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

或者

this.$router.push({ name: 'user', params: { id: 123 }})

在组件中，可以通过 `$route.params` 来获取参数，例如：

export default {
  created() {
    console.log(this.$route.params.id)
  }
}

如果你需要打开一个新页面，可以在 `router-link` 中添加 `target="_blank"` 属性，例如：

<router-link :to="{ name: 'user', params: { id: 123 } }" target="_blank">User</router-link>

相关问题

vue3 路由传参不显示在url,还有打开新页面

Vue3 中的路由传参可以通过以下两种方式实现：

1. 使用路由参数

在定义路由时，可以使用冒号（:）来定义路由参数。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]

在这个例子中，`:id` 表示一个路由参数。当访问 `/user/123` 时，路由将会匹配到 `User` 组件，并且 `this.$route.params.id` 将会是 `123`。

2. 使用查询参数

在 URL 中使用查询参数，可以使用 `query` 属性来传递数据。例如：

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.push({ path: '/user', query: { id: '123' }})

在这个例子中，`query` 属性传递的是一个对象，其中 `id` 是一个查询参数。当访问 `/user?id=123` 时，路由将会匹配到 `User` 组件，并且 `this.$route.query.id` 将会是 `123`。

对于打开新页面，可以使用 `window.open(url)` 来实现。例如：

window.open('/user?id=123', '_blank')

这将会在新窗口中打开一个 URL 为 `/user?id=123` 的页面。

vue 路由跳转传参打开新页面

Vue路由跳转并传递参数通常使用`this.$router.push()`方法，并可以将参数放在URL查询字符串中或者通过命名的路由参数(`params`)来进行传递。这里是一个简单的例子：

// 使用查询字符串的方式传递参数
this.$router.push({
  path: '/detail',
  query: { id: '参数值' }
})

// 或者使用命名参数（路径里直接包含参数）
this.$router.push({ name: '详情页', params: { id: '参数值' } })

// 在组件内部使用动态路由
<router-link :to="{ name: '详情页', params: { id: $route.params.id + 1 } }">点击增加ID</router-link>