vue学习day12-声明式导航续、路由重定向、Vue路由-404、Vue路由-模式设置、编程式导航

34、声明式导航续

(4)跳转传参

1)跳转传参
①语法:
传递:to=“/path?参数名=值”
接收:如果在模版里,通过$route.query.参数名获取,如果在js代码里,通过this. $route.query.参数名获取
②示例

传参:

链接路径

传参

获取:

2)动态传参
①配置动态路由
②配置导航链接
to=”path/参数值”
③对应页面组件接收传递过来的值
$route.params.参数名
④示例:

3)跳转传参的两种方式的区别
①查询参数传参(多个参数)

        跳转:to=”/path?参数名1=值$参数名2=值”

        获取:$route.query.参数名

②动态路由传参(单个参数)

        配置动态路由:path:”/path/参数名”

        跳转:to=”/path/参数值”

        获取:$route.params.参数名

4)动态路由参数可选符

配置动态路由之后,当不传参数时,会出现整个页面都为空的情况

加上可选符

35、路由重定向

(1)原因(为什么要进行路由重定向)

网页打开,url默认路径是/的,没有匹配到路径,会出现空白

(2)重定向语法

 {path:'匹配路径',redirect'重定向到的路径'}

匹配到path后,强制跳转redirect设置的路径

(3)示例

36、Vue路由-404

(1)作用:当路径找不到匹配时,给个提示页面

(2)位置:配置在路由最后

(3)语法:path:“*”(任意路径)-前面不匹配就命中最后这个

(4)示例

37、Vue路由-模式设置

路径带“#”的怎么变成自然的,不带“#”的

(1)模式类型:

1)hash路由(默认)的

比如:

2)history路由(常用),使用history需要通知后台匹配一定的规则(上线需要服务器端支持)

比如:

 

38、编程式导航

(1)概念:用js代码来进行跳转

(比如:点击按钮跳转)

(2)分类

1)path路径跳转

语法:

        ①简单

        this.$router.push('路由路径')

②完整

        this.$router.push({

        path: '路由路径'

        })

③示例

简单:

完整:

2)name命名路由跳转(适合path路径长的场景)

语法:

①命名:

(给需要的地方,添加一个name即可)

{ name: '路由名', path: '路由路径', component: 组件名},

②添加

给需要的方法中添加

 this.$router.push({

name:'search'

})

③示例

效果:

(3)路由传参

两种传参方式:查询参数+动态路由传参

两种跳转方式,对于两种传参方式都支持

1)path路径跳转传参

方法一(简单):

①提供一个双向绑定的值

②传参

③获取参数

④效果:

方法二(完整写法传参):
①提供一个双向绑定的值

②传参

③获取参数

④效果:

方法三(动态路由传参):
①设置动态路由

②传参

③获取

④效果:

2)name命名路由跳转传参
方法一(query):
①命名

②传参

③获取

④效果:

方法二(动态路由传参):
①设置动态路由

②传参

③获取

④效果:

vue2的基本学习正式结束,vuex准备开启!!!

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

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

相关文章

scrapy爬取城市天气数据

scrapy爬取城市天气数据 一、创建scrapy项目二、修改settings,设置UA,开启管道三、编写爬虫文件四、编写items.py五、在weather.py中导入WeatherSpiderItem类六、管道中存入数据,保存至csv文件七、完整代码一、创建scrapy项目 先来看一下爬取的字段情况: 本次爬取城市天…

HarmonyOS持久化存储数据Preference

Preference首选项 首选项:首选项为应用提供Key-Value键值型的数据处理能力,支持应用持久化轻量级数据,并对其修改和查询。数据存储形式为键值对,键的类型为字符串型,值的存储数据类型包括数字型、字符型、布尔型以及这…

VirtualSurveyor9.0.3 无人机测绘软件功能介绍

Virtual Surveyor9.0.3中文版是功能强大的无人机测绘软件,使用旨在为用户提供完整的地理空间数据可视化和分析功能,带来提高的生产力,功能全面而强大,在无人机到CAD模型的过程中,使用Virtual Surveyor软件来拆卸输送机…

MySQL4.索引及视图

1.建库 create database mydb15_indexstu; use mydb15_indexstu;2.建表 2.1 student表学(sno)号为主键,姓名(sname)不能重名,性别(ssex)仅能输入男或女,默认所在系别&a…

数据结构的概念和术语

目录 一.前言 二.数据结构的基本概念 三.数据结构的术语 一.前言 数据结构是一门研究非数值计算的程序设计中计算机的操作对象以及它们之间的关系和操作的学科。数据结构的基本数据结构包括两部分,线性结构跟非线性结构。 二.数据结构的基本概念 数据结构主要包括…

TikTok养号的网络环境及相关代理IP知识

TikTok作为一个流行的短视频分享平台,其用户量非常庞大,很多商家和个人都会使用TikTok来进行引流和推广。由于TikTok的规则和政策限制了每个用户每天发布视频的数量,因此许多用户会使用多个账号来发布更多的视频以提高曝光率。 然而&#xff…

因果推断 | 双重机器学习(DML)算法原理和实例应用

文章目录 1 引言2 DML算法原理2.1 问题阐述2.2 DML算法 3 DML代码实现3.1 策略变量为0/1变量3.2 策略变量为连续变量 4 总结5 相关阅读 1 引言 小伙伴们,好久不见呀。 距离上次更新已经过去了一个半月,上次发文章时还信誓旦旦地表达自己后续目标是3周更…

【LeetCode、牛客】链表分割、链表的回文结构、160.相交链表

Hi~!这里是奋斗的明志,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 🌱🌱个人主页:奋斗的明志 🌱🌱所属专栏:数据结构 📚本系列文章为个人学…

LangGPT结构化提示词编写实践

langGPT提示词 # Role: 浮点数比较助手 ## Profile - author: LangGPT - version: 1.0 - language: 中文 - description: 一个专门帮助用户进行浮点数比较的助手,确保LLM能够准确识别和对比浮点数。## Skills 1. 理解浮点数的结构和数值意义。 2. 精…

windows10 安装CUDA教程

如何在windows10系统上安装CUDA? 1、查看电脑的NVIDIA版本 nvidia-smi 2、官网下载所需CUDA版本 官网地址:https://developer.nvidia.com/cuda-toolkit-archive 我们所安装的CUDA版本需要小于等于本机电脑的NVIDIA版本。推荐使用迅雷下载,速度会更快哦。 3、安装步骤

解决Linux桌面初始化问题

问题 启动vnc桌面,提示问题 定位 从[t]csh手册 可以看到,其初始化流程 经定位,是.cshrc的这段代码存在,导致桌面初始化异常。 [wanlin.wangicinfra-cn-172-16-0-115 ~]$ cat .cshrc ...部分省略... # Environment for anac…

无涯·问知财报解读,辅助更加明智的决策

财报解读就像是给公司做一次全面的体检,是理解公司内部运作机制和市场表现的一把钥匙,能够有效帮助投资者、分析师、管理层以及所有市场参与者判断一家公司的健康程度和发展潜力。 星环科技无涯问知的财经库内置了企业年报及财经类信息,并对…

LeetCode/NowCoder-二叉树OJ练习

励志冰檗:形容在清苦的生活环境中激励自己的意志。💓💓💓 目录 说在前面 题目一:单值二叉树 题目二:相同的树 题目三:对称二叉树 题目四:二叉树的前序遍历 题目五:另…

秋招突击——7/24——知识补充——JVM类加载机制

文章目录 引言类加载机制知识点复习类的生命周期1、加载2、连接——验证3、连接——准备4、连接——解析5、初始化 类加载器和类加载机制类加载器类加载机制——双亲委派模型 面试题整理1、类加载是什么2、类加载的过程是什么3、有哪些类加载器?4、双亲委派模型是什…

java面向对象进阶进阶篇--《JDK8,JDK9接口中新增的方法、接口的应用、适配器设计模式》

个人主页→VON 收录专栏→java从入门到起飞 接口→接口和接口与抽象类综合案例 一、JDK8接口中新增的方法 在JDK 8中,接口新增了几个重要的特性和方法,其中最显著的是默认方法(Default Methods)和静态方法(Static Met…

Linux嵌入式学习——数据结构——线性表的链式结构

线性表的链式存储 解决顺序存储的缺点,插入和删除,动态存储问题。 特点: 线性表链式存储结构的特点是一组任意的存储单位存储线性表的数据元素,存储单元可以是连续的,也可以不连续。可以被存储在任意内存未被占…

使用lotusscript控制台吧!

大家好,才是真的好。 我们的公众号通常会涉及到很多lotusScript代码功能,写lotusScript代码时,我常常在想,这行语句明明是对的,为什么会有报错? 为此,常常会在语句中加入on error goto语句&am…

【Git多人协作开发】不同的分支下的多人协作开发模式

目录 0.前言背景 1.开发者1☞完成准备工作&协作开发 1.1查看分支情况 1.2创建本地分支feature-1 1.3三板斧 1.4push推本地分支feature-1到远程仓库 2.开发者2☞完成准备工作&协作开发 2.1创建本地分支feature-2 2.2三板斧 2.2push推送本地feature-2到远程仓库…

黑马JavaWeb企业级开发(知识清单)01——前端介绍,HTML实现标题:排版

文章目录 前言一、认识web前端、HTML、CSS二、VS Code开发工具&#xff08;插件弃用问题&#xff09;三、HTML结构标签介绍1. 标签页标题< title >2. 图片标签< img >1) 常见属性2) src路径书写方式 3. 标题标签< h >4. 水平分页线标签< hr > 四、用Vs…

生成树协议配置与分析

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、相关知识 1、生成树协议简介 生成树协议&#xff08;STP&#xff09;是一种避免数据链路层逻辑环路的机制&#xff0c;它通过信息交互识别环路并…