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

已于 2022-12-22 22:05:07 修改
阅读量1.2k 收藏
点赞数
分类专栏： Vue 文章标签： javascript 前端 vue.js
于 2022-12-21 17:22:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62327332/article/details/128399681
版权

 这里主要在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>插槽，这个就是用来选择传进来的内容的安放位置的。

 以上就是默认插槽的使用

北岭山脚鼠鼠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中监听路由参数的变化及方法
10-15
主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2 vue-router3 this.$router.query获取与传递
LlanyW的专栏
02-06 2849
一、router知识点1、$router：路由操作对象（只写对象）2、$route.query是一个key-value对象，若没有参数，则为空对象。
Vue3从入门到实战：路由的query和params参数
最新发布
LHY537200的博客
04-03 2960
在Vue 3中，我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息，以便页面可以根据这些信息来显示不同的内容或执行不同的操作。 查询参数的使用方式类似于在URL中添加附加信息，以便页面之间可以根据这些信息进行交互和通信。这在很多应用中都非常有用，例如搜索功能、过滤功能、分页功能等等。 举个例子，假设我们有一个商品列表页面，用户可以在搜索框中输入关键字来搜索商品。当用户点击搜索按钮时，我们可以将输入的关键字作为查询参数添加到URL中，然后跳转到商品列表页面。在商品列表页面
在vue3+ts项目里使用query和params传参
一步一个脚印，踏实努力，向着目标前进
08-21 848
对于`params`参数，我们可以使用`route.params.routeParam`来获取传递的参数。在组件中，我们使用`props`选项来定义`routeParam`属性，并指定它的类型为`String`，并将其设置为必需的
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
Vue笔记
Nie_XiaoGang的博客
09-15 818
Vue,vue-router,vuex笔记
vue3中路由传参query、params及动态路由传参详解
极客神殿
12-22 1万+
编程式导航 使用 或者 的时候，改为对象形式新增 必须传入一个对象 接受参数 使用 的 二、传参 编程式导航 使用 或者 的时候，改为对象形式并且只能使用，无效，然后传入 接受参数 使用 的 三、动态传参 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 接受参数 使用 的 四、传参和传参的区别 传参配置的是 ，而
Vue3 路由跳转传参query参数（router）
gurenchang的博客
07-29 1779
Vue3对路由部分进行了优化与更新，与Vue2相比路由跳转的传值的方式有所不同Vue3新增了两个API：useRouter和useRoute。
vue3.0路由参数获取方法
Leslie_hxd的博客
10-15 1万+
方法一：通过引入 "vue-router" 的 useRouter import { useRouter, onMounted } from 'vue-router' setup (props, context) { const router = useRouter(); onMounted(() => { // 打印 console.log('router:', router.currentRoute.value.query) }) re
详解vue嵌套路由-query传递参数
12-29
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数，传递参数有两种方法，通过 query 或者 params index.html <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router></router> ...
基于vue.js路由参数的实例讲解——简单易懂
10-19
下面小编就为大家带来一篇基于vue.js路由参数的实例讲解——简单易懂。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3 路由跳转接收参数query
weixin_46572329的博客
07-18 1111
vue3 路由
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 {} } ...
【Vue3】路由的query参数和params参数
null18的博客
03-14 1725
路由参数是 Vue 路由系统中非常重要的一部分，通过动态路由参数、查询参数和路由元信息，我们可以实现更灵活的页面导航和数据传递。熟练掌握这些技巧可以帮助我们更好地构建复杂的单页面应用挑战与创造都是很痛苦的，但是很充实。
vue3的路由传参query、params以及动态路由传参
小多的博客
07-18 2万+
例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。在VueRouter中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数。很多时候，我们需要将给定匹配模式的路由映射到同一个组件。的时候，改为对象形式并且只能使用。的时候，改为对象形式新增。//模拟根据id获取数据。，path无效，然后传入。...
VUE3 跳转传参及接收参数的方式
lyna的博客
03-03 5806
1.通过query传参： // 传参 const handleJump = (id) => { router.push({ path: '/xxx', //router里的路由配置 query: { id: id } }) } // 参数接收 onMounted(() => { console.log("获取到的参数", pr
vue3中，通过路由传参的几种形式
listener_life的博客
06-29 4232
vue3中，通过路由传参的几种方式
vue2路由和vue3插槽区别
09-16
在Vue2中，路由使用的是Vue Router库，而在Vue3中，路由使用的是Vue Router 4。以下是Vue2路由和Vue3插槽的区别： 1. 路由配置方式不同：在Vue2中，路由配置是通过创建一个路由实例并传入routes选项来完成的。而在Vue3中，路由配置是通过使用createRouter函数创建一个路由实例，并将routes选项作为参数传递给createRouter函数来完成的。 2. 路由实例的挂载方式不同：在Vue2中，路由实例需要通过调用router对象的$mount方法手动挂载到DOM上。而在Vue3中，路由实例会自动挂载到应用的根组件上。 3. 路由守卫的写法有所不同：在Vue2中，路由守卫的写法是通过在路由实例上定义beforeEach、beforeResolve和afterEach等方法来完成的。而在Vue3中，路由守卫的写法是通过在路由实例上定义beforeEach、beforeResolve和afterEach等方法，并将它们作为属性传递给createRouter函数来完成的。 4. 插槽的使用方式有所改变：在Vue2中，插槽是通过<slot>标签以及具名插槽来实现的。而在Vue3中，插槽被重命名为模板块（template block），并使用<template>标签来定义和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值