Vue3路由传参用query丢失了响应式

Vue 3 的路由传参如果使用 query，是不会保持响应式的。这是因为 query 参数是通过 URL 中的字符串来传递的，而字符串是不会被 Vue 监听的。

如果你想保持响应式，可以考虑使用 params 传参。params 是通过路由路径中的参数来传递的，因此它们可以被 Vue 监听。

举个例子：

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

// 在组件中获取参数
export default {
  mounted() {
    console.log(this.$route.params.id) // 打印出路由参数 id 的值
  }
}

当你访问 `/user/123` 时，路由参数 id 的值就会被设置为 `123`，并且在组件中也能够获取到这个值。而且，如果你在组件中修改了这个参数的值，它也会被自动更新到 URL 中，保持和数据的同步。

相关问题

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路由传参跳转传参

好的，我可以为您解答。在vue3中，可以使用路由传参进行页面跳转，并且可以将参数传递给目标组件。具体实现方法可以参考以下步骤：

1.在路由配置中定义需要跳转的页面，并设置传递参数的名称。

{
  path: '/user/:id', 
  name: 'User',
  component: UserComponent
}

2.在原始组件中使用 `router-link` 进行跳转，并传递参数。

<router-link :to="{name: 'User', params: { id: 123 }}">用户详情</router-link>

3.在目标组件中使用 `$route` 对象获取传递的参数。

export default {
  created() {
    console.log(this.$route.params.id) // 打印传递的 id 值
  }
}

希望以上解答能够帮助到您，如有其他问题，欢迎继续咨询。