VUE路由跳转、传参总结

路由跳转方式有哪些?

在Vue中,路由跳转主要有以下几种方式:

  1. 使用router-link组件:
	<router-link to="/home">Home</router-link>
  1. 使用编程式导航
// 字符串
this.$router.push('home')// 对象
this.$router.push({ path: 'home' })// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
  1. 使用router.replace(无历史记录):
this.$router.replace({ path: 'home' })
  1. 使用router.go(前进或后退记录):
// 前进一步
this.$router.go(1)// 后退一步
this.$router.go(-1)
  1. 在导航守卫中进行跳转:
router.beforeEach((to, from, next) => {if (需要跳转) {next('/about')} else {next() // 继续当前导航}
})

路由传参的方式有哪些?

路由传参有以下维度要选择

1.传递信息类型

参数类型一般有两种字符串或者对象

2.载体

路由传递参数的载体只有两个query和params。

3. 编写方式

编写方式有两种:

  1. 使用声明式导航 router-link组件
  2. 使用编程式导航

4.跳转目标

  1. path
  2. name

以上有四个维度,每个维度又有各种选择,所以组合起来 有16种路由传递参数的方式。但是有一些情况不能使用。

枚举出所有的情况

使用载体params 和 传递参数类型是对象

1.无法使用!!!)使用方式router-link,目标使用path

<router-link :to="{ path: '/home', params: { id: 1 } }" />
//  如果载体是params,传递数据是对象,只能使用name配置项,不能使用path配置项

2.使用方式router-link,目标使用name

<router-link :to="{ name: 'home', params: { id: 1 } }" />

3.(无法使用!!!)使用方式使用编程式导航,目标使用path,

this.$router.push({ path: '/home', params: { id: '1' } }) 
// 如果载体是params,传递数据是对象,只能使用name配置项,不能使用path配置项

4.使用方式使用编程式导航,目标使用name

this.$router.push({ name: 'home', params: { id: '1' } }) 
使用载体query 和 传递参数类型是对象

5.使用方式router-link,目标使用path

<router-link :to="{ path: '/home', query: { id: 1 } }" />

6.使用方式router-link,目标使用name

<router-link :to="{ name: 'home', query: { id: 1 } }" />

7.使用方式使用编程式导航,目标使用path,

this.$router.push({ path: '/home', query: { id: '1' } }) 

8.使用方式使用编程式导航,目标使用name

this.$router.push({ name: 'home', query: { id: '1' } }) 
使用载体params 和 传递参数类型是字符串

9.使用方式router-link,目标使用path

//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
//声明式导航使用
// params 不能与 path 一起使用// 错误的写法
<router-link to="{path : '/about',  params: { id: 1 } }">跳转</router-link>
// 正确的写法
<router-link to="{path : '/about/1' }">跳转</router-link> 

10.使用方式router-link,目标使用name

//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
//声明式导航使用
<router-link to="{name : 'about',  params: { id: 1 } }">跳转</router-link>

11.使用方式使用编程式导航,目标使用path

//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
this.$router.push({ path: 'about/1', })

12.使用方式使用编程式导航,目标使用name

//路由参数配置
const router = new VueRouter({routes: [{path: '/about/:id',component: User}]
})
this.$router.push({ name: 'about', params: { id: '001' } })
使用载体query 和 传递参数类型是字符串

13.使用方式router-link,目标使用path

<router-link to="/home/detail?id=1"><router-link :to="{ path: '/home', query: { id: 1 } }" />

14.使用方式router-link,目标使用name

<router-link :to="{ name: 'home', query: { id: 1 } }" />

15.使用方式使用编程式导航,目标使用path,

this.$router.push({ path: '/home?id=1'}) 
this.$router.push({ path: '/home', query: { id: '1' } }) 

16.使用方式使用编程式导航,目标使用name

this.$router.push({ name: 'home', query: { id: '1' } }) 

哪些情况下路由传递的参数刷新页面会丢失?

1.使用了params的载体的情况

2.使用了query载体的情况

如果传的是字符串,刷新页面后数据是不会丢失的,但是的是对象或者是数组,那么刷新后,页面的数据就会丢失。

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

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

相关文章

大学生拥有一台服务器可以做什么?

云服务器的崭新世界&#xff0c;充满了无限的可能性和激动人心的挑战。无论你是想要建立个人网站、运行定时任务&#xff0c;还是学习Linux系统&#xff0c;云服务器都为你提供了一个极具灵活性和自由度的平台。 让我们一起深入探索&#xff0c;看看拥有一台服务器你可以做些什…

【学习 在服务器上使用bypy直接下载百度云盘的资源。

参考&#xff1a;bypy 具体步骤 step1&#xff1a; pip install bypystep2&#xff1a; bypy info第一次输入该命令&#xff0c; 点击进入网址&#xff0c;点击登陆后&#xff0c;获取token&#xff08;10分钟内有效&#xff09;&#xff0c;然后输入到命令行&#xff1a;…

【linux深入剖析】深入理解基础外设--磁盘

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.磁盘物理结构2.磁盘…

汽车差速器原理?

差速器&#xff08;Differential&#xff09;是汽车传动系统中的重要组成部分&#xff0c;主要作用是允许车辆驱动轮以不同速度旋转&#xff0c;从而使车辆能够顺利转弯并保持稳定性。其基本原理如下&#xff1a; 解决转弯问题&#xff1a; 当车辆转弯时&#xff0c;内侧轮和外…

pnputil卸载Sangfor

pnputil /delete-driver sangforvnic.inf /uninstall Microsoft PnP 工具PNPUTIL [/add-driver <...> | /delete-driver <...> |/export-driver <...> | /enum-drivers |/enum-devices [<...>] | /enum-interfaces [<...>] |/disable-device &l…

Go 实战|使用 Wails 构建轻量级的桌面应用:仿微信登录界面 Demo

概述 本文探讨 Wails 框架的使用&#xff0c;从搭建环境到开发&#xff0c;再到最终的构建打包&#xff0c;本项目源码 GitHub 地址&#xff1a;https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架&#xff0c;他允许开发者利用 Go …

C中的函数原型声明、头文件包含的思考

1&#xff09;如果add1.c调用了add2.c中的add2函数&#xff0c;add2.h定义了add2.c中的函数原型&#xff0c;add1.c需包含#include "add2.h"的原因&#xff1f; add1.c既然调用了函数add2&#xff0c;必须知道函数add2的函数原型&#xff0c;否则gcc -c add1.c&…

联想电脑VMware虚拟机VT开启虚拟化

以联想电脑为例。 关机重启&#xff0c; 有的电脑是按F2&#xff0c; 有的是按fnF2 进入BIOS&#xff0c;左右键&#xff0c;选择Configuration&#xff0c; 再上下键选择 Intel Virtual Technology 按回车键&#xff0c;再按上下键选择 Enable &#xff0c;回车确认。 按fn…

Xlinx相关原语讲解导航页面

原语就是对FPGA底层器件的直接调用&#xff0c;与IP功能是类似的&#xff0c;将原语的参数变成IP配置时的GUI界面参数&#xff0c;可能会更加直观。IP的缺陷在于繁杂&#xff0c;比如SelectIO IP内部包含IDDR、ODDR等等IO转换的功能&#xff0c;如果只想使用单沿转双沿一个功能…

ChatGPT全方位解析:如何培养 AI 智能对话技能?

简介 ChatGPT 的主要优点之一是它能够理解和响应自然语言输入。在日常生活中&#xff0c;沟通本来就是很重要的一门课程&#xff0c;沟通的过程中表达的越清晰&#xff0c;给到的信息越多&#xff0c;那么沟通就越顺畅。 和 ChatGPT 沟通也是同样的道理&#xff0c;如果想要C…

[软件使用-Vcftools / Plink ] VCF文件中剔除/提取一个或多个样本,两组方法实现及运算时间比较

官网&#xff1a;VCFtools 参数查看&#xff1a; 提取样本 --keep 剔除样本 --remove # 提取某几个样本 system("vcftools --vcf eg.vcf --keep keep.list --recode --out keep") # keep.list 是由每一行为一个样本ID组成的文件 tips: 运行比较耗时 官网&#xff…

Spring的Bean标签配置IOC和依赖注入详解

目录 spring配置文件详解 spring配置文件详解 spring的依赖注入和控制反转梳理总结&#xff0c;仅供参考 /*** Bean的依赖注入&#xff1a;* ① 创建 UserService&#xff0c;UserService 内部在调用 UserDao的save() 方法* ② 将 UserServiceImpl 的创建权交给 Spring* ③ 从…

Oracle测试10046参数及打印结果

1.1 开启session sql trace alter session set tracefile_identifier10046; alter session set timed_statistics true; --默认是true alter session set statistics_levelall; --实例级别设置需要注意&#xff0c;会消耗大量的CPU alter session set max_…

《关于进一步优化重点文旅场所支付服务 提升支付便利性的通知》发布

为贯彻党中央、国务院决策部署&#xff0c;落实《国务院办公厅关于进一步优化支付服务 提升支付便利性的意见》要求&#xff0c;近日&#xff0c;中国人民银行、文化和旅游部、国家外汇管理局和国家文物局联合印发《关于进一步优化重点文旅场所支付服务 提升支付便利性的通知》…

【算法】二分算法题

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 704. 二分查找1.1 分析1.2 代码 2. 34. 在排序数组中查找元素的第一个和最后一个位置2.1 分析2.2 代码 3. 35. 搜索插入位置3.1 分析3.2 代码 4. 852. 山脉数组的峰顶索引4.1 分析4.2 代码 5. 153. 寻找旋转排序数组中…

程序员面试经典——01.01. 判定字符是否唯一

01.01. 判定字符是否唯一 已解答 简单 实现一个算法&#xff0c;确定一个字符串 s 的所有字符是否全都不同。 示例 1&#xff1a; 输入: s "leetcode" 输出: false 示例 2&#xff1a; 输入: s "abc" 输出: true限制&#xff1a; 0 < len(s) &…

蓝桥杯简单STL

目录 vector vector定义 vector访问 常用函数 size() ​编辑 push_back(num) pop_back() clear 迭代器&#xff08;iterator) 迭代器定义 遍历数组示例 insert(it, element) erase(it) 标准模板库--STL&#xff0c;它包含了多种预定义的容器、算法和迭代器&…

联想电脑开启虚拟化失败,开启虚拟化却提示还没有开启虚拟化

安装虚拟机的时候&#xff0c; 电脑要开启虚拟化&#xff0c; Intel VT&#xff0c; 去BIOS开启了&#xff0c; 但是依然报错&#xff0c;说虚拟化处于禁用状态。 解决方案&#xff1a; 去联想官方&#xff0c;下载BIOS更新包&#xff0c;更新BIOS。 更新文档&#xff1a; 联…

Harmony鸿蒙南向驱动开发-DAC

DAC&#xff08;Digital to Analog Converter&#xff09;是一种通过电流、电压或电荷的形式将数字信号转换为模拟信号的设备。 DAC模块支持数模转换的开发。它主要用于&#xff1a; 作为过程控制计算机系统的输出通道&#xff0c;与执行器相连&#xff0c;实现对生产过程的自…

MySQL数据库 数据库基本操作(四):表的增删查改(下)

1. 联合查询 注:联合查询是面试中的重点,只要考到sql,大多数情况下都考的是联合查询,而且联合查询也是我们学习中的难点. 1.1 笛卡尔积 在实际开发中,数据往往来自不同的表,所以要多表联合查询.多表查询是对多张表的数据笛卡尔积. 它们是两张表的各行数据通过全排列得到的. …