如何在vue3+ts项目中使用query和params传参

更新时间：2023年04月18日 10:35:00 作者：小明不在家

Vue3中的路由传参有两种方式:query和params,下面这篇文章主要给大家介绍了关于如何在vue3+ts项目中使用query和params传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一 query 传参（类似get请求）

query 传参方式①

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <el-button type="success" @click="toList"> to list</el-button>
</div>
 
</template>
 
<script lang='ts' setup>
 
import { ref } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本类型数据
const name = ref('梨花白')
// 4 query传参
const toList = ()=>{
    router.push({
        //这种对象式传参写法 query除开和path搭配外还可以和name一起使用
        path:'/list',
        //或者这样 path和name任选其一
        //name:'List',
        query:{
            name:name.value
        }
    })
}
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

看下 router/index.ts 文件

import { createRouter,createWebHistory,RouteRecordRaw } from 'vue-router'
 
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('../pages/home.vue')
    },{
        path:'/home',
        name:'Home',//路由命名
        component:()=>import('../pages/home.vue')
    },{
        path:'/list',
        name:'List',//路由命名 为路由跳转作准备
        component:()=>import('../pages/list.vue')
    },{
        //定义404页面
        path:'/404',
        component:()=>import('../pages/notfound.vue')
    },{
        //匹配未定义路由 然后重定向至404页面
        path:'/:pathMath(.*)',
        redirect:'/404'
    }
]
 
const router = createRouter({
    routes,
    history:createWebHistory()
})
 
export default router

有两个注意点

① ref定义响应式基本类型数据后，修改和赋值要带上 .value

② query是一个对象类型所以我们定义的基本类型数据不能直接赋值要给对象式写法 {}

像以下两种写法都是报错的

<script lang='ts' setup>
 
import { ref } from 'vue'
 
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本数据
const name = ref('梨花白')
// 4 query传参
const toList = ()=>{
    router.push({
        path:'/list',
        query:name //报错 不能将类型“Ref<string>”分配给类型“LocationQueryRaw”。
                   //类型“Ref<string>”中缺少类型“string”的索引签名
    })
}
 
</script>

<script lang='ts' setup>
 
import { ref } from 'vue'
 
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本数据
const name = ref('梨花白')
// 4 query传参
const toList = ()=>{
    router.push({
        path:'/list',
        query:name.value //报错 不能将类型“string”分配给类型“LocationQueryRaw”
                   
    })
}
</script>

接收方组件

list.vue

<template>
    
<div class='c'>
    <p>query接参</p>
    <!-- 4 展示数据 -->
    <p>name: <span>{{ name }}</span></p>
</div>
 
</template>
 
<script lang='ts' setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from 'vue-router'
// 2 获取实例
const route = useRoute()
// 3 解构赋值
const { query:{name} } = route
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>P>span{
    color:coral;
}
</style>

效果：

动态效果：

以上我们可以得知当使用query传参时，参数的详细内容都会在地址栏完整的展示出来。

这对于数据安全来说是致命的

当然也有它自有的优势：刷新不会丢失数据

下面看看使用query传参的另一种形式：？传参

query 传参方式②

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <el-button type="success" @click="toList"> to list</el-button>
</div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本数据
const name = ref('桃花夭')
// 4 query ?传参 
const toList = ()=>{
    router.push('/list?name=' + name.value)
    //也可以使用ES6里的模板字符串
    //router.push(`/list?name=${name.value}`)
}
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

效果：

动态效果：

两者效果别无二致也有同学说我在传入引用类型数据时老是报错怎搞嘞

好的下面开始传递引用类型数据

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <el-button type="success" @click="toList"> to list</el-button>
</div>
 
</template>
 
<script lang='ts' setup>
 
import { ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义数据接口类型
interface props {
    id:number,
    content:string
}
// 4 reactive定义引用类型数据
const arr:props[] = reactive([
    {
        id:1,
        content:'关山难越，谁悲失路之人？'
    },{
        id:2,
        content:'萍水相逢，尽是他乡之客！'
    }
])
// 4 或这样
// const arr = reactive([
//     {
//         id:1,
//         content:'关山难越，谁悲失路之人？'
//     },{
//         id:2,
//         content:'萍水相逢，尽是他乡之客！'
//     }
// ] as props[])
 
// 5 query ?传参 
const toList = ()=>{
    router.push('/list?arr=' + JSON.stringify(arr))
    //也可以使用模板字符串
    // router.push(`/list?arr=${JSON.stringify(arr)}`)
}
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>query接参</p>
    <!-- 4 展示数据 -->
    <p v-for="item in arr" :key="item.id">
      <span>{{ item.content }}</span>
    </p>
  </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 使用JSON.parse()方法把传过来的字符串参数转回对象
const arr = JSON.parse(route.query.arr as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

动态效果：

所以是

在使用？传参传入引用类型数据时传递时要使用JSON.stringify()方法转成字符串类型

在接收时要使用JSON.parse()方法再转回最初的类型

易错点如下：

query 传参方式③

其实也就是声明式路由跳转时带参

传递方组件

home.vue

<template>
 
<div class='c'>
    <p>query传参</p>
    <router-link 
    //to的对象式写法 与编程式路由跳转传参的对象式写法相对应
    :to="{
        path:'/list',
        //或 name:'List'
        query:{
            arr:JSON.stringify(arr)
        }
    }">
    <el-button type="success"> to list</el-button>
</router-link>
 
//<router-link 
    //to的字符串写法 与编程式路由跳转的？传参写法相对应
//    :to="`/list?arr=${JSON.stringify(arr)}`">
//    <el-button type="success"> to list</el-button>
//</router-link>
    
</div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义数据接口类型
interface props {
    id:number,
    content:string
}
// 4 ref定义基本数据 但未定义数据类型
const arr:props[] = reactive([
    {
        id:1,
        content:'关山难越，谁悲失路之人？'
    },{
        id:2,
        content:'萍水相逢，尽是他乡之客！'
    }
])
// 4 或这样
// const arr = reactive([
//     {
//         id:1,
//         content:'关山难越，谁悲失路之人？'
//     },{
//         id:2,
//         content:'萍水相逢，尽是他乡之客！'
//     }
// ] as props[])
 
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

效果：

二 params 传参（类似post请求）

params 传参方式①

传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 ref定义基本类型数据 
const str = ref('月出于东山之上，徘徊于斗牛之间。')
// 4 params 传参 只能搭配name使用 path会忽略params带参
const toList = ()=>{
    router.push({
        name:'List',
        params:{
            str:str.value
        }
    })
}
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>params接参</p>
    <!-- 4 展示数据 -->
    <p>str: <span>{{ str?str:'刷新我就不见啦！' }}</span></p>
  </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 解构赋值 刷新页面 参数丢失 
const { params:{str} } = route;
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

在使用params传参时参数详情在请求体里不会展示在地址栏中这对数据安全来说是友好的

但弊端就是刷新页面数据丢失

其实在实际项目里，数据多是请求数据赋值来的

所以接下来我们尝试home.vue组件里请求数据后传递给list.vue组件展示数据

传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 引入接口
import { tt } from '../request/api'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义接口数据
interface props {
    userId:number,
    city:string,
    address:string,
    name:string,
    zip:number,
    region:string,
    date:string
}
// 4 reactive定义数据
let list:props[] = reactive([])
// 5 params 传参 必须搭配name使用 path会忽略params带参
const toList = ()=>{
    tt().then((res:any)=>{
        if(res && res.data.code === 200){
            list = res.data.data.list
            router.push({
        name:'List',
        params:{
            list:JSON.stringify(list)
        }
    })
        }else{
            alert(res.data.msg)
        }
    })
    
}
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>params接参</p>
    <!-- 4 展示数据 -->
    <div class="c" v-for="item in list" :key="item.userId">
          <p>名称：<span>{{ item.name }}</span></p>
          <p>城市：<span>{{ item.city }}</span></p>
          <p>地区：<span>{{ item.region }}</span></p>
          <p>地址：<span>{{ item.address }}</span></p>
          <p>日期：<span>{{ item.date }}</span></p>
          <p>编号：<span>{{ item.zip }}</span></p>
      </div>
      </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 声明赋值 刷新页面 参数丢失 这里报错
const  list  = JSON.parse(route.params.list as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

那我们在使用params传参时如何避免页面刷新导致参数丢失问题呢？

那就是 params 的第二种传参方式了：动态路由传参

params 传参方式②

1 既然名叫动态路由传参那首先第一步就是在router/index.ts里配置动态路由

router/index.ts

import { createRouter,createWebHistory,RouteRecordRaw } from 'vue-router'
 
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('../pages/home.vue')
    },{
        path:'/home',
        name:'Home',//路由命名
        component:()=>import('../pages/home.vue')
    },{
        path:'/list/:arr',//接收方路由配置
        name:'List',//路由命名 为路由跳转作准备
        component:()=>import('../pages/list.vue')
    },{
        //定义404页面
        path:'/404',
        component:()=>import('../pages/notfound.vue')
    },{
        //匹配未定义路由 然后重定向至404页面
        path:'/:pathMath(.*)',
        redirect:'/404'
    }
]
 
const router = createRouter({
    routes,
    history:createWebHistory()
})
 
export default router

2 传递方组件

home.vue

<template>
 
 <div class="c">
    <p>params 传参</p>
    <el-button type="warning" @click="toList"> to list page</el-button>
 </div>
 
</template>
 
<script lang='ts' setup>
 
import { toRefs,ref,reactive } from 'vue'
// 引入接口
import { tt } from '../request/api'
// 1 引入路由跳转方法useRouter
import { useRouter } from 'vue-router'
// 2 拿到实例
const router = useRouter()
// 3 定义接口数据
interface props {
    userId:number,
    city:string,
    address:string,
    name:string,
    zip:number,
    province:string,
    date:string
}
// 4 ref定义基本数据 但未定义数据类型
let list:props[] = reactive([])
// 5 params 传参 必须搭配name使用 path会忽略params带参
const toList = ()=>{
    tt().then((res:any)=>{
        if(res && res.data.code === 200){
            list = res.data.data.list
            router.push({
        name:'List',
        params:{
            //动态路由配置/:arr 这里就是arr
            arr:JSON.stringify(list)
        }
    })
        }else{
            alert(res.data.msg)
        }
    })
    
}
</script>
 
<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
.c>p>span{
    color:coral;
}
</style>

接收方组件

list.vue

<template>
 
  <div class="c">
    <p>params接参</p>
    <!-- 4 展示数据 -->
    <div class="c" v-for="item in list" :key="item.userId">
          <p>名称：<span>{{ item.name }}</span></p>
          <p>城市：<span>{{ item.city }}</span></p>
          <p>地区：<span>{{ item.region }}</span></p>
          <p>地址：<span>{{ item.address }}</span></p>
          <p>日期：<span>{{ item.date }}</span></p>
          <p>编号：<span>{{ item.zip }}</span></p>
      </div>
      </div>
 
</template>
 
<script lang="ts" setup>
 
// 1 引入useRoute路由信息方法
import { useRoute } from "vue-router";
// 2 获取实例
const route = useRoute();
// 3 声明赋值 刷新页面 参数不会丢失
const  list  = JSON.parse(route.params.arr as string);
 
</script>
 
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c > P > span {
  color: coral;
}
</style>

效果：

可！这和query传参有毛区别？参数都会在地址栏显示

从效果上看是这样的没有区别

只是query传参有长度限制，而params无

params的声明式路由跳转传参就不赘述了，会了编程式路由跳转传参，那声明式就不在话下。

注意query和path或name都可搭配使用，而params只能和name搭配就行了

在尝试写vue3+ts项目时，遇到的绝大多数问题都是数据类型定义相关的也就是ts问题突出

都说any大法好，这也就失去了类型限定即ts的意义这又和js毫无分别了

所以ts还是重点学习的方面

最后提醒一句：

如果你在vue3+ts项目里使用params传参时，尽管代码核实几遍都是对的，可还是报错，

那可能不是你的问题，尝试下载 vue-router@4.0.1 版本，然后重启项目，你可能就惊奇的发现

参数就这么展示在自己眼前了

总结

到此这篇关于如何在vue3+ts项目中使用query和params传参的文章就介绍到这了,更多相关vue3+ts用query和params传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue 实现html中根据类型显示内容
今天小编大家分享一篇Vue 实现html中根据类型显示内容，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
axios携带cookie配置详解(axios+koa)
这篇文章主要介绍了axios携带cookie配置详解(axios+koa)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
详解Vue中数据可视化词云展示与词云的生成
数据可视化是现代Web应用程序中的一个重要组成部分，词云是一种非常流行的数据可视化形式，可以用来展示文本数据中的主题和关键字，本文我们将介绍如何在Vue中使用词云库进行数据可视化词云展示和词云生成，需要的可以参考一下
2023-06-06
vue中使用Axios最佳实践方式
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，Axios 使用简单,包尺寸小且提供了易于扩展的接口，这篇文章主要介绍了vue中使用Axios最佳实践,需要的朋友可以参考下
2022-09-09
vue关闭开发模式提示的简单解决办法
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下
2024-04-04
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
这篇文章主要介绍了vuejs 切换导航条高亮路由高亮的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue中iframe使用以及结合postMessage实现跨域通信
这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue实现简单弹窗效果
这篇文章主要为大家详细介绍了Vue实现简单弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue3使用element-plus搭建后台管理系统之菜单管理功能
这篇文章主要介绍了vue3使用element-plus搭建后台管理系统之菜单管理,使用element-plus el-tree组件快速开发树形菜单结构，el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能，需要的朋友可以参考下
2022-04-04
在vue中axios设置timeout超时的操作
这篇文章主要介绍了在vue中axios设置timeout超时的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09