vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+ts用query和params传参

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

作者：小明不在家

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传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文