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

Vue 3中路由传参的方式有很多种，包括通过params属性传递参数，通过props属性传递参数，也可以通过query属性传递参数。以下是具体的实现方法：

1. 通过params属性传递参数

使用params属性进行路由传参的方式比较常见。在路由跳转时，通过params属性将参数传递给目标组件。在目标组件中，可以通过$route.params访问到传递过来的参数。

实现代码如下：

// 在路由配置中，定义name属性和params属性
const routes = [
{
path: '/user/:id',
name: 'user',
component: User,
props: true,
// 通过params传递参数
params: { name: '张三', age: 18 }
}
]

// 在跳转时，传递参数
this.$router.push({ name: 'user', params: { id: 1 } })

// 在目标组件中，访问参数
export default {
name: 'User',
props: {
name: String,
age: Number
},
created() {
// 通过$route.params访问参数
console.log(this.$route.params) // 输出{id: 1}
console.log(this.name, this.age) // 输出"张三"和18
}
}

2. 通过props属性传递参数

除了通过params属性传递参数外，Vue 3还可以通过props属性传递参数。这样做的好处是可以使用组件化开发的方式，在跳转页面时直接将组件传递给router-view标签。

实现代码如下：

// 在路由配置中，定义name属性和props属性
const routes = [
{
path: '/user',
name: 'user',
component: User,
// 通过props传递参数
props: { id: 1, name: '张三', age: 18 }
}
]

// 在跳转时，传递组件
this.$router.push({ name: 'user', props: true })

// 在目标组件中，定义props和模板
export default {
name: 'User',
props: {
id: Number,
name: String,
age: Number
},
template: `
<div>
<p>{{ name }}</p>
<p>{{ age }}</p>
</div>
`
}

3. 通过query属性传递参数

另外，还可以通过query属性传递参数。这种方式与params属性类似，只是在路由配置和传递参数时需要使用query属性。

实现代码如下：

// 在路由配置中，定义name属性和query属性
const routes = [
{
path: '/user',
name: 'user',
component: User,
// 通过query传递参数
query: { id: 1, name: '张三', age: 18 }
}
]

// 在跳转时，传递参数
this.$router.push({ name: 'user', query: { id: 2 } })

// 在目标组件中，访问参数
export default {
name: 'User',
created() {
// 通过$route.query访问参数
console.log(this.$route.query) // 输出{id: 2, name: "张三", age: 18}
}
}

综上所述，Vue 3提供了多种路由传参的方式，开发者可以根据自己的需求选择不同的方式进行路由跳转和传参。