Vue3——路由的query参数和命名路由以及默认插槽slot的使用

已于 2022-12-22 22:05:07 修改
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： javascript 前端 vue.js
于 2022-12-21 17:22:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62327332/article/details/128399681
本文详细介绍了在前端开发中如何通过路由组件复用来解决多条信息展示的问题，避免创建大量组件。讲解了使用query传参而非props的原因，并展示了在message和detail组件中的配置。同时，文章还探讨了命名路由的使用，简化了路由配置。此外，插槽的概念也被提及，用于处理组件复用时不同内容类型的展示需求。通过案例分析，深入理解了如何在父组件和子组件间利用slot进行内容插入和定位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 这里主要在message页面组件和detail页面组件介绍

看一个案例，当一个二级路由下面又有许多个不同的跳转页面的时候，比如下图的about/message/detail , 需要分别展示多条信息，这里不能给每一条信息都配置一个组件，那样当信息的数量多的时候需要非常多的组件，所以有了路由组件复用的概念。这里不能使用props传参，因为这里message和detail的关系不是父组件和子组件的关系。

为了实现路由组件复用这里要用到query传参

首先看到路由配置里面的信息，要message下面增加一个children进行页面跳转，这里不管是二级路由还是三级路由都是一样的做法

 

看到message组件里面的配置，需要进行如图的配置，这里用了一个v-for显示多条消息的入口

 再到detail里面的配置，这里mounted里面有个route.query包含了关于这个组件所有路由信息

命名路由的使用 

路由里的配置项，为detail的页面加上一个名字后，就可以写name不用path

message里面的配置

在一般的开发里面已经不在这样写

一般都是如图这样写

slot插槽使用

首先我们来看如下一个图片，首先假如我们要来实现像下面的效果，在学完props之后我们都会想着的是组件复用实现，因为下面的数据类型都是一样的。只需要用组件标签传参并在子组件用peops接收就可以显示在对应的位置上了。

但是当出现另一种情况，如下图所示，复用的组件需要呈现的内容是不同的类型时就不能单单使用一个props了，这时候就可以使用一个新东西——<slot></slot>，插槽

对于上图，我们看到父组件和子组件的代码部分，在父组件里面引入的组件标签由原本的单标签变成了双标签，并且还在里面写了一些内容就是上图看见的那些，与此同时在子组件里面有定义一个 <slot></slot>插槽，这个就是用来选择传进来的内容的安放位置的。

 以上就是默认插槽的使用

Vue前端路由从入门到精通
大模型大数据攻城狮的专栏
07-20 316
传统网页是多页应用（MPA），每次点击链接，浏览器都会向服务器请求一个新页面，页面刷新，用户体验多少有点“卡顿”。而单页应用通过JavaScript动态改变页面内容，URL的变化靠前端路由来管理。前端路由的核心是：监听URL变化，动态渲染对应的组件，而不触发页面刷新。Vue Router通过history模式或hash模式Hash模式：URL里带个#，像http://example.com/#/home，通过监听hashchange事件来切换组件。简单粗暴，兼容性好，但URL有点丑。History模式。
vue之我不会 计算属性 vuex 路由 插槽
m0_51492817的博客
09-13 544
actions: {// 一秒后, 给一个数, 去修改 num}, 1000)},getters: {// getters函数的第一个参数是 state// 必须要有返回值。
Vue3从入门到实战：路由的query和params参数
LHY537200的博客
04-03 1万+
在Vue 3中，我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息，以便页面可以根据这些信息来显示不同的内容或执行不同的操作。 查询参数的使用方式类似于在URL中添加附加信息，以便页面之间可以根据这些信息进行交互和通信。这在很多应用中都非常有用，例如搜索功能、过滤功能、分页功能等等。 举个例子，假设我们有一个商品列表页面，用户可以在搜索框中输入关键字来搜索商品。当用户点击搜索按钮时，我们可以将输入的关键字作为查询参数添加到URL中，然后跳转到商品列表页面。在商品列表页面
Vue3路由传参（query）
mfxcyh的博客
04-14 1万+
1.在主组件中引入路由 import { useRouter } from "vue-router"; 2.创建路由对象 const route = new useRouter() 3.在组件中绑定方法 <goods-list-item v-for="(item,index) in goods.list" :product="item" :key="index" @click="goDetail(item.id)"> </goods-list-it
vue3:十三、分类管理-表格--slot插槽详细说明---表格内拼接字段、tag标签
最新发布
weixin_46001736的博客
05-14 990
vue3:十三、分类管理-表格--slot插槽详细说明---表格内拼接字段、tag标签
vue3 路由跳转接收参数query
weixin_46572329的博客
07-18 1250
vue3 路由
Vue3 路由跳转传参query参数（router）
gurenchang的博客
07-29 2693
Vue3对路由部分进行了优化与更新，与Vue2相比路由跳转的传值的方式有所不同Vue3新增了两个API：useRouter和useRoute。
vue3关于路由query传参
半朵梨花压海棠
08-13 3342
传参 import { useRouter } from "vue-router"; const router = useRouter(); router.push({ path: "/Detail", query: { id:"123" } }); 接受 import { useRoute } from "vue-router"; const route = useRoute(); console.log(route.query.id); 注意： 需要引入路由，在setup()创建对象，再使用，区分
vue2进阶 - 插槽、路由、缓存组件
qq_52320796的博客
04-09 1688
本主题围绕 Vue 2 的三大核心功能展开，帮助开发者深入理解并掌握插槽、路由和缓存组件的使用方法及其在实际项目中的应用
1.Vue3实战——网易云音乐
2401_82986110的博客
05-23 1986
网易云音乐，项目实战，Vue3
Vue2与Vue3学习精要：组件通信、插槽与路由传参
"Vue2+Vue3学习笔记，涵盖了Vue框架的关键知识点，包括生命周期、数据绑定、组件创建、属性传递、事件通信、插槽机制、路由传参等" Vue.js是前端开发中常用的JavaScript框架，本笔记主要关注Vue2和Vue3的共性和差异...
vue3中路由传参query、params及动态路由传参详解
极客神殿
12-22 1万+
编程式导航 使用 或者 的时候，改为对象形式新增 必须传入一个对象 接受参数 使用 的 二、传参 编程式导航 使用 或者 的时候，改为对象形式并且只能使用，无效，然后传入 接受参数 使用 的 三、动态传参 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 接受参数 使用 的 四、传参和传参的区别 传参配置的是 ，而
Vue3 中路由 query 的全面解析与应用
m0_57836225的博客
02-22 1024
在 Vue Router 中，路由query是一种在 URL 中传递参数的方式。它通过在 URL 的路径后面添加?，然后以key=value的形式传递参数，多个参数之间用连接。比如/home?，这里name和age就是通过query传递的参数。和路由params不同，query参数不会改变 URL 的路径结构，只是作为额外的数据附加在 URL 后面，而且query参数是可选的，不影响路由的匹配。
Vue3获取路由参数、包含获取路径参数
weixin_46607967的博客
07-17 3161
该demo使用了重定向 把123和456 分别设置为id和name 通过路由传参 传递给重定向后的 url 路由。这里业务逻辑为 跳转到url页面 同时接收到123和456参数。如实际项目不需要 则按需修改 一条路由也可实现。route为路由信息 query为获取的路由参数。如果是通过url传参 可直接在组件内使用。在 url 页面中正常获取路由参数即可。如果参数直接在路径中 可参考。中对 url路由 进行修改。该条路由表信息使用了。
vue3 setup里获取query params路由携带的参数
weixin_40461134的博客
09-30 1万+
import { useRoute } from "vue-router"; setup(){ const router = useRouter(); console.log(router); 通过router.meta里的参数获取 }
【Vue3】路由的query参数和params参数
null18的博客
03-14 2825
路由参数是 Vue 路由系统中非常重要的一部分，通过动态路由参数、查询参数和路由元信息，我们可以实现更灵活的页面导航和数据传递。熟练掌握这些技巧可以帮助我们更好地构建复杂的单页面应用挑战与创造都是很痛苦的，但是很充实。
vue3 router路由如何在页面中使用和如何取query, params
JackieDYH的博客
01-13 518
需要注意的是，useRoute只能在页面组件中使用，而不能在其他组件中使用。useRouter和useRoute都是Next.js中的React Hooks，用于访问当前页面的路由信息。而useRoute可以在页面组件中获取当前路由的元数据信息，例如路由的名称、文件路径等。useRouter可以在页面组件中获取路由信息，并提供了一些方法来修改路由。
Vue3中传递与接收query、params参数，并使用路由props接收
weixin_59233142的博客
01-15 4054
RouterLink replace to="/">新闻</RouterLink>第二种路由的props：将query或params参数以props的形式传递给组件。如：<News :name="name" :age="age“>收：defineProps(["name","age"])使用内置组件RouterLink 跳转。3. 接收query、params参数。2. 路由跳转的方式，并传参。1. 定义路由规则如下。push：记录历史记录。replace：不记录。
Vue3路由参数获取方式
热门推荐
05-25 2万+
方法一：通过引入 “vue-router” 的 useRouter import { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { // 打印 console.log('router:', router.currentRoute.value.query) }) return {} } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值