Vuequery详解

小蓝 • 2024-12-13 17:33 • 编程

一、vuequery传参传不过去

在使用Vuequery时，我们可能会遇到传参无法传递的问题。这是因为Vuequery在进行路由切换时，传递的参数是以URL的形式进行传递的，而URL是有长度限制的。因此，如果我们要传递的参数过多，可能会导致传参失败。此时，我们可以使用sessionStorage或localStorage来存储参数，然后再在接收组件中获取。

二、vue路由query传参

在Vue中，我们可以使用Vue的路由机制来进行传参。通过使用query属性，可以非常方便地进行传参。例如：


// 路由配置
{
  path: '/user',
  component: UserComponent
}

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

// 在接收组件中获取参数
this.$route.query.id
this.$route.query.name

三、vuequery传参和promise传参的区别

Vuequery和Promise都是传递参数的方式。Vuequery相对来说更适合传递简单的数据，而Promise适合传递异步数据。

Vuequery传递简单数据：


// 发送组件
this.$router.push({ path: '/user', query: { id: 1, name: '张三' } })

// 接收组件
this.$route.query.id
this.$route.query.name

Promise传递异步数据：


// 发送组件
const data = await this.$http.get('/user/1')
this.$emit('get-user', data)

// 接收组件


methods: {
  handleGetUser(data) {
    console.log(data)
  }
}

四、vuequery传参和params传参的区别

Vuequery和Params都是Vue的路由机制进行传参的方式。Vuequery是通过URL的形式进行传参，而Params是通过路径的形式进行传参。

Vuequery传参：


// 路由配置
{
  path: '/user',
  component: UserComponent
}

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

// 在接收组件中获取参数
this.$route.query.id

Params传参：


// 路由配置
{
  path: '/user/:id',
  component: UserComponent
}

// 在跳转时传递参数
this.$router.push({ path: '/user/1' })

// 在接收组件中获取参数
this.$route.params.id

五、vuequery传的参数刷新还在么

在使用Vuequery传参时，如果刷新页面，参数会丢失。这是因为Vue路由默认是基于HTML5的history模式进行路由切换的，而刷新页面会重新请求页面资源，导致参数丢失。如果需要保持参数不丢失，可以考虑使用localStorage或sessionStorage来存储参数，或者使用Vue的keep-alive组件来缓存组件状态。



// 在App.vue中使用keep-alive组件
                                                        原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/251904.html