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` 的页面。