Vue3之路由的query参数和params参数用法
路由中的参数
在 Vue 中，路由参数是指在访问不同页面时传递的信息。
它们可以用来动态地构建页面内容，实现页面间的数据传递和状态管理。
Vue 的路由系统提供了多种方式来处理路由参数，包括动态路由、查询参数和路由元信息等
query参数
我们接着使用上节用到的相关代码，在路径匹配后面我们加了一个问号，在问号后面我们加了一个参数
<template>
<div class="plays">
<!--导航区-->
<ul>
<li v-for="play in newList" :key="play.id">
<RouterLink to="/plays/detail?a=1">{{play.title}}</RouterLink>
</li>
</ul>
<!--展示区-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
在地址栏我们可以清楚的看到，但是这也仅仅是浅浅看一看
接下来我们打开Detail.vue文件，我们导入一个useRoute
通过useRoute可以方便地访问当前路由的路径、参数、查询参数等信息，而不需要依赖于this.$route。
接下来我们应该实例化一下函数，之后我们就可以在上面的模版中尽显表达了
<template>
<ul class="news-list">
<li>编号:{{ route.query.id }}</li>
<li>标题:{{ route.query.title }}</li>
<li>内容:{{ route.query.content }}</li>
</ul>
</template>
但是现在其实我们并不能匹配到id、title、content，可以匹配到的或许仅仅是a，然后显示出1，接下来我们要解决这个问题
<template>
<div class="plays">
<!--导航区-->
<ul>
<li v-for="play in newList" :key="play.id">
<RouterLink :to="`/plays/detail?id=${play.id}`">{{play.title}}</RouterLink>
</li>
</ul>
<!--展示区-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
这样我们就可以点击哪个出现哪个对应的编号了
修改后的如下
<RouterLink :to="`/plays/detail?id=${play.id}&title=${play.title}&content=${play.content}`">{{play.title}}</RouterLink>
上面的是第一种写法
下面是第二种写法
<RouterLink
:to="{
name:'detail',
query:{
id:play.id,
title:play.title,
content:play.content
}
}"
>
{{play.title}}
</RouterLink>
params参数
还是需要useRoute的导入，接下来我们需要修改一下index.ts中的path
后面的问号表示可有可无
path:'Detail/:id/:title/:content?',
模版这里也要修改一下
<template>
<ul class="news-list">
<li>编号:{{ route.params.id }}</li>
<li>标题:{{ route.params.title }}</li>
<li>内容:{{ route.params.content }}</li>
</ul>
</template>
同样也有两种写法
</RouterLink> -->
<!-- <RouterLink :to="`/news/detail/${play.id}/${play.title}/${play.content}`">{{play.title}}</RouterLink> -->
<RouterLink
:to="{
name:'Detail',
params:{
id:play.id,
title:play.title,
content:play.content
}
}"
>
{{play.title}}
</RouterLink>
综上所述：
1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
2：传递params参数时，需要提前在规则中占位。
区别和适用场景
- Params 参数 适用于标识资源、动态路由等需要作为路由一部分的信息，如 /user/:id；
- Query 参数 适用于配置项、筛选条件等不需要作为路由一部分的可选参数，如 /user?id=123。
总结
路由参数是 Vue 路由系统中非常重要的一部分，通过动态路由参数、查询参数和路由元信息，我们可以实现更灵活的页面导航和数据传递。
熟练掌握这些技巧可以帮助我们更好地构建复杂的单页面应用
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue表格显示字符串过长的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue Cli中的环境变量和模式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vuex获取state对象中值的所有方法小结(module中的state)
这篇文章主要介绍了vuex获取state对象中值的所有方法小结(module中的state)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
前段时间看抖音，有人用时间轮盘作为动态的桌面壁纸，一时间成为全网最火的电脑屏保，后来小米等运用市场也出现了【时间轮盘】，有点像五行八卦，感觉很好玩，于是突发奇想，自己写一个网页版小DEMO玩玩,需要的朋友可以参考下2019-04-04
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
这篇文章主要介绍了Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK ),非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
在组件中增加的css加了scoped属性之后,就在会在当前这个组件的节点上增加一个data-v-xxx属性,下面这篇文章主要给大家介绍了关于Vue中CSS scoped原理的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要帮助大家简单理解vue中el、template、replace元素,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
webpack dev-server代理websocket问题
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue3+element-plus 实现动态菜单和动态路由的渲染的项目实践
本文主要介绍了vue3+element-plus 实现动态菜单和动态路由的渲染的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
使用Pinia Persistedstate插件实现状态持久化的操作方法
Pinia 作为 Vue 的新一代状态管理工具,以其轻量化和易用性受到开发者的喜爱,然而,Pinia 默认使用内存存储状态,为了解决这个问题,我们可以借助 Pinia Persistedstate 插件来实现状态的持久化存储,本文将详细介绍该插件的使用方法,需要的朋友可以参考下2024-11-11
最新评论