vuerouter声明式导航

声明式导航-跳转传参数

1.查询参数传参

语法:to ''/path?参数名=值''

2.对应页面组件接受传来的值

''$router.query.参数名''

2.动态路由传参

1.配置动态路由

2.配置导航连接

to=''/path/参数值''

 

3.对应页面组件接收传递过来的值

#route.params.参数名

多个参数传递:查询参数的方式

 

动态路由参数可选符,在动态路由后面加?表示参数可传可不传

结果对比

有参

无参

 

网页重定向

Vue路由-404

1.在views组件中创建404组件

404

<template><div><h1>404NotFound</h1></div>
</template><script>export default {}</script><style></style>

2.在路由器中导入组件并匹配路由

 路由设置

设置history

编程式基本跳转

1.路径跳转

path路径跳转

this.router.push

<template><div><p>我的朋友灰灰</p><p>我的朋友白白</p><!-- 将刚刚的声明式导航进行传递值 --><p>{{$route.query.key}}</p><p>{{$route.query.age}}</p><button @click="goinfo">跳转info</button></div></template><script>export default {methods:{goinfo(){// 通过router跳转this.$router.push('/info')}}}</script><style></style>

 

点击

 

name命名路由跳转

 

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

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

相关文章

untiy 为预制体动态加载光照贴图

unity版本为2021.8 预制体不能携带光照贴图信息&#xff0c;只能我们自己准备了 多方查找加自己摸索终于找到了适合新版本的解决方案&#xff0c;直接贴代码 将这个脚本挂到预制体的最上级 using System.Collections; using System.Collections.Generic; using UnityEditor; …

强化训练:day8(求最小公倍数、数组中的最⻓连续⼦序列、字⺟收集)

文章目录 前言1. 最小公倍数1.1 题目描述1.2 解题思路1.3 代码实现 2. 数组中的最⻓连续⼦序列2.1 题目描述2.2 解题思路2.3 代码实现 3. 字母收集3.1 题目描述3.2 解题思路3.3 代码实现 总结 前言 1. 最小公倍数   2. 数组中的最⻓连续⼦序列   3. 字⺟收集 1. 最小公倍数…

【数据可视化01】matplotlib实例介绍2

目录 一、引言二、实例介绍1.箱线图2.热力图3.3D图 一、引言 接着上一文章【数据可视化01】matplotlib实例介绍1继续介绍matplotlib的实例。 二、实例介绍 在matplotlib中&#xff0c;常用的图形类型包括&#xff1a; 箱线图&#xff08;Box plot&#xff09;&#xff1a;用…

[Java EE] 文件IO (二):文件内容读写-----数据流

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (91平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …

Seal^_^【送书活动第4期】——《Web渗透测试技术》

Seal^_^【送书活动第4期】——《Web渗透测试技术》 一、参与方式二、本期推荐图书2.1 前 言2.2 关于本书2.3 本书读者2.4 图书简介2.5 作者荐语2.6 编辑推荐2.7 目 录 三、正版购买 掌握Web渗透测试技术&#xff0c;提高Web应用安全性。 一、参与方式 1、关注博主的账号。 2、点…

Qt---项目的创建及运行

一、创建第一个Qt程序 1. 点击创建项目后&#xff0c;选择项目路径以及给项目起名称 名称&#xff1a;不能有中文、不能有空格 路径&#xff1a;不能有中文路径 2. 默认创建有窗口类myWidget&#xff0c;基类有三种选择&#xff1a;QWidget、QMainWindow、QDialog 3. m…

ssl证书免费申请指南

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、购买证书二、创建证书三、 验证证书等待出现如下页面&#xff0c;说明申请成功&#xff1a; ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6b6c1dd11d4c467687318552da7cdbb2.png) 总结 前言 今天为大…

企业必看:镭速教你如何测试内网文件传输效率和稳定问题

在现代商业运作中&#xff0c;企业内部文件传输的效率和稳定性对于数据管理和业务流程极为重要。无论是远程工作还是团队协作&#xff0c;高效的文件传输都能显著提升工作效率。今天镭速小编就教你如何测试内网文件传输效率和稳定问题。 1、磁盘性能&#xff0c;即硬盘的读取和…

类图及类的关系

类图&#xff08;Class Diagram&#xff09;是UML&#xff08;Unified Modeling Language&#xff0c;统一建模语言&#xff09;中的一种图&#xff0c;用于描述系统中类的静态结构&#xff0c;包括类的属性、方法以及类之间的关系。 一、类 类&#xff08;Class&#xff09;…

高级查询(一)

解决需求&#xff1a;Excel都可以轻松搞定 分组查询原理&#xff1a; 语法&#xff1a; SELECT …<列名> FROM <表名> [WHERE<条件表达式> ] GROUP BY 参与分组的列 可以与 聚合函数作用的列 一块显示 注意 SELECT列表中只能包含&#xff1a; 1、被分…

勒索软件漏洞?在不支付赎金的情况下解密文件

概述 在上一篇文章中&#xff0c;笔者对BianLian勒索软件进行了研究剖析&#xff0c;并且尝试模拟构建了一款针对BianLian勒索软件的解密工具&#xff0c;研究分析过程中&#xff0c;笔者感觉构建勒索软件的解密工具还挺有成就感&#xff0c;因此&#xff0c;笔者准备再找一款…

gin框架学习笔记(三) ——路由请求与相关参数

参数种类与参数处理 查询参数 在讲解查询参数的定义之前&#xff0c;我们先来看一个例子&#xff0c;当我打开了CSDN&#xff0c;我现在想查看我的博客浏览量&#xff0c;那么我就需要点击我的头像来打开我的个人主页,像下面这样: 我们现在把浏览器的网址取下来&#xff0c;…