您的位置:

Vuequery详解

一、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组件

   

keep-alive组件可以缓存组件状态,避免组件重复渲染,从而保留传递的参数。