web学习笔记(六十四)

目录

1.路由的声明式跳转和编程式跳转

1.1声明式跳转

1.2编程式跳转

2. 路由传参query

3.路由传参 params

4.Vue中路由传参方式以及如何接收路由参数?

5.命名路由


1.路由的声明式跳转和编程式跳转

我们在这篇文章中提到的路由都是前端路由,是用来匹配组件完成跳转的,而后端路由则是为了获取json数据的。

1.1声明式跳转

      <RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink>

1.2编程式跳转

可以编写js代码来完成页面的跳转

(1) router.push('/about') 等价于RouterLink,括号内可以写字符串也可以写成对象的形式。
  router.push({path: '/about' })。

(2)router.go(1) 表示前进一个页面,在有历史记录的时候适合用,可以前进一个或多个页面,也括号内也可以写一个负数,表示后退几个页面。

(3)router.back() 表示后退到上一个页面,不需要传参,直接调用即可。

(4)router.replace('/about') 表示路由的重定向,这个操作不会保留历史记录,比较适合用在跳转登录页面。括号内可以写字符串也可以写成对象的形式。

<template><div><!-- --><button @click="go">过渡动画页面</button><button @click="back">后退</button></div>
</template><script setup>
import { useRouter, useRoute } from 'vue-router'
// useRouter 跳转页面 useRoute传参
const router = useRouter() //获取路由对象。调用方法跳转
const route = useRoute() //获取当前路由对象,从中获得参数// 前进
const go = () => {// router.push('/about')router.push({path: '/about'//等价于RouterLink})// 表示前进一个页面,在有历史记录的时候适合用//   router.go(1)// 重定向:做跳转登录的时候会用,是否需要保存当前历史记录,方便后续返回。// router.replace('/about')
}
// 后退
const back = () => {router.back()
}
</script>

2. 路由传参query

不是路由的一部分,不参与路由的匹配,多写一个少写一个无所谓。

首先需要导入useRoute,用来获取当前路由对象,从而获取参数。

import {  useRoute } from 'vue-router'
// useRouter 跳转页面 useRoute传参
const route = useRoute() //获取当前路由对象,从中获得参数

传参有两种方式,可以在字符串后面跟?然后问号后面再写参数 ,

    <RouterLink to="/about?id=20">编程式:过渡动画页面</RouterLink>

也可以在对象中通过query来传参,等价于?

 router.push({path: '/about',query: {id: 200}//等价于RouterLink})

然后通过router.query来输出传过来的参数即可

  console.log(route.query)

3.路由传参 params

动态路由参数,是路由的一部分,参与路由的匹配,需要在index.js页面设置动态参数,此时的参数是必传的,而且参数数量也要一致。

    {path: '/about/:id',name: 'about',component: () => import('../views/AboutView.vue')}

动态路由参数输出是需要用到  params来接收的。

  console.log(route.params)

动态路由参数和 query路由参数是可以同时存在的。

4.Vue中路由传参方式以及如何接收路由参数?

  1. 1.使用url拼接字符串的形式传值  vue2使用this.$route.query接收;vue3使用useRoute().query接收
  2. 2动态路由参数 path: “/list/:id”  vue2使用this.$route.params接收;vue3使用useRoute().params接收
  3. 3.动态路由参数是路由的一部分,参与路由匹配,因此设置几个冒号变量就要设置几个参数,否则匹配不到路由,而?参数不参与路由匹配
  4. 4.动态路由参数和?参数都会在地址栏中显示。

5.命名路由

命名路由是指在 Vue Router 中为特定路由定义一个名称,以便在代码中引用该路由。通过为路由设置名称,可以更方便地在组件中进行路由导航或进行路由匹配。如果需要更改路由路径,只需在路由配置中更改一处即可,而不必在整个代码库中搜索所有引用该路径的地方。方便后期维护

在 Vue Router 中,通过 name 属性来为路由定义名称。例如:

const routes = [{path: '/about',name: 'about',component: AboutComponent},{path: '/contact',name: 'contact',component: ContactComponent}
];

 使用命名路由传参时要用下面的格式,注意:to前面要加:

    <RouterLink :to="{ name: 'about', params: { id: 100 }, query: {ids:100,kw:'111'} }">命名路由</RouterLink> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/24138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式在芯片验证中的应用——迭代器

一、迭代器设计模式 迭代器设计模式(iterator)是一种行为设计模式&#xff0c; 让你能在不暴露集合底层表现形式 &#xff08;列表、 栈和树等数据结构&#xff09; 的情况下遍历集合中所有的元素。 在验证环境中的checker会收集各个monitor上送过来的transactions&#xff0…

设计软件有哪些?效果工具篇(2),渲染100邀请码1a12

这次我们继续介绍一些渲染效果和后期处理的工具。 1、Krakatoa Krakatoa是由Thinkbox Software开发的强大的粒子渲染器&#xff0c;可用于Autodesk 3ds Max等软件。它专注于处理大规模粒子数据&#xff0c;提供了高效的渲染解决方案&#xff0c;适用于各种特效、粒子系统和模…

TESSENT2024.1安装

一、安装过程参考Calibre安装过程&#xff08;此处省略&#xff0c;不再赘述&#xff09; 二、安装license管理器&#xff1a; SiemensLicenseServer_v2.2.1.0_Lnx64_x86-64.bin 三、Patch补丁&#xff1a; tessent安装目录和license管理安装目录&#xff0c;执行FlexNetLic…

debugfs和tracefs

debufs&#xff08;通常指的是debugfs&#xff09;和tracefs在Linux系统中都是与调试和跟踪相关的文件系统&#xff0c;但它们的用途和功能有所不同。以下是对两者的详细介绍和关联说明&#xff1a; debugfs 用途&#xff1a;debugfs是一个虚拟文件系统&#xff0c;主要用于内…

企业必备技能导航栏的写法

创建一个导航栏是网页设计中的一个重要环节&#xff0c;它不仅有助于用户快速找到他们需要的信息&#xff0c;还能提升整个网站的用户体验。以下是一些基本步骤和技巧&#xff0c;可以帮助你快速制作一个高效且美观的导航栏&#xff1a; 确定导航栏位置&#xff1a;导航栏通常位…

C++:Traits编程技法在STL迭代器中的应用

文章目录 迭代器相应型别Traits(特性)编程技法——STL源代码门钥迭代器相应型别一&#xff1a;value_type迭代器相应型别二&#xff1a;difference_type迭代器相应型别三&#xff1a;reference_type迭代器相应型别四&#xff1a;pointer_type迭代器相应型别五&#xff1a;itera…

2 - 寻找用户推荐人(高频 SQL 50 题基础版)

2.寻找用户推荐人 考点: sql里面的不等于&#xff0c;不包含null -- null 用数字判断筛选不出来 select name from Customer where referee_id !2 OR referee_id IS NULL;

PyTorch学习(12):PyTorch的张量相乘(torch.matmul)

PyTorch学习&#xff08;1&#xff09;&#xff1a;torch.meshgrid的使用-CSDN博客 PyTorch学习&#xff08;2&#xff09;&#xff1a;torch.device-CSDN博客 PyTorch学习&#xff08;9&#xff09;&#xff1a;torch.topk-CSDN博客 PyTorch学习&#xff08;10&#xff09;…

设置密码重要性!美国一配件制造商因忘设密码影响50 多万客户

1、Cox Biz 身份验证绕过漏洞使数百万台设备暴露于接管 美国一家领先宽带提供商cox的基础架构中存在 API 授权绕过漏洞&#xff0c;如果被利用攻击者不仅可以访问企业客户的个人身份信息 &#xff08;PII&#xff09;&#xff0c;还可以访问 Wi-Fi 密码和连接设备上的信息&…

1501 - JUC高并发

须知少许凌云志&#xff0c;曾许人间第一流 看的是尚硅谷的视频做的学习总结&#xff0c;感恩老师&#xff0c;下面是视频的地址 传送门https://www.bilibili.com/video/BV1Kw411Z7dF 0.思维导图 1.JUC简介 1.1 什么是JUC JUC&#xff0c; java.util.concurrent工具包的简称…

STM32-呼吸灯仿真

目录 前言: 一.呼吸灯 二.跑马灯 三. 总结 前言: 本篇的主要内容是关于STM32-呼吸灯的仿真,包括呼吸灯,跑马灯的实现与完整代码,欢迎大家的点赞,评论和关注. 接上http://t.csdnimg.cn/mvWR4 既然已经点亮了一盏灯,接下来就可以做更多实验了, 一.呼吸灯 在上一个的基础上…

探索Java 17:新特性解析与实战指南

引言 Java作为企业级应用开发的首选语言之一&#xff0c;每次更新都带来了许多期待与讨论。Java 17&#xff0c;作为最新的长期支持版本&#xff0c;不仅稳定了过去的实验特性&#xff0c;还引入了多项改进和新功能&#xff0c;本文将深入探讨这些新特性&#xff0c;并提供实用…

谷歌SEO实战教程:谷歌排名第一从入门到精通

谷歌SEO排名提升秘籍&#xff01; 要了解SEO即搜索引擎优化的基础概念&#xff0c;包括谷歌搜索引擎的工作原理和排名算法&#xff1b;其次&#xff0c;重视网站内容的质量和优化、关键词密度、内部及外部链接等&#xff1b;再者&#xff0c;关注网站的结构和用户体验&#xf…

【一】apollo 环境配置

域控制器配置 google输入法安装 安装输入google pinyin法 sudo apt install fcitx-bin sudo apt install fcitx-table sudo apt-get install fcitx fcitx-googlepinyin -y 最后需要reboot 系统环境 修改文件夹名称为英文 export LANGen_US xdg-user-dirs-gtk-update 挂载硬…

【车辆仿真】从0开始建立dSPACE RT Simulink工程:集成ASM模型(Matlab方法)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、搭建工程1.新建ConfigurationDesk工程2.新建MDL Simulink文件3.编译Demo模型以生成sdf4.初始化ControlDesk工程5.初始化ModelDesk工程6.初始化MotionDesk工程7.M&S Verification总结前…

Ubuntu由于没有公钥,无法验证下列签名。

其他操作系统报错也一样处理&#xff0c;我kali的也是这样解决的。 使用sudo apt update时出现以下错误&#xff1a; 3B4FE6ACC0B21F32就是公钥&#xff0c;每个人的不一样&#xff0c;注意看自己的报错信息 :~$ sudo apt update [sudo] ts 的密码&#xff1a; 命中:1 http:…

2559. 统计范围内的元音字符串数(前缀和) o(n)时间复杂度

给你一个下标从 0 开始的字符串数组 words 以及一个二维整数数组 queries 。 每个查询 queries[i] [li, ri] 会要求我们统计在 words 中下标在 li 到 ri 范围内&#xff08;包含 这两个值&#xff09;并且以元音开头和结尾的字符串的数目。 返回一个整数数组&#xff0c;其中…

提高篇(五):使用Processing创作互动艺术:从灵感到实现

提高篇(五):使用Processing创作互动艺术:从灵感到实现 引言 互动艺术将观众从被动的观察者转变为主动参与者,通过创意编程和技术手段,让艺术品具备感知和回应的能力。Processing作为一种强大的创意编程工具,提供了丰富的功能和灵活的编程环境,帮助艺术家和设计师实现他…

微前端之旅:探索Qiankun的实践经验

theme: devui-blue 什么是微前端&#xff1f; 微前端是一种前端架构方法&#xff0c;它借鉴了微服务的架构理念&#xff0c;将一个庞大的前端应用拆分为多个独立灵活的小型应用&#xff0c;每个应用都可以独立开发、独立运行、独立部署&#xff0c;再将这些小型应用联合为一个完…

淘宝天猫商品详情API接口详解

一、淘宝天猫商品详情API接口概述 淘宝天猫商品详情API接口是淘宝天猫开放平台提供的一项重要服务&#xff0c;它允许开发者通过API接口获取淘宝天猫商品的详细信息。这些信息包括但不限于商品标题、价格、描述、图片、销量、评价等。通过使用淘宝天猫商品详情API接口&#xf…