常见路由跳转的几种方式

news2024/12/22 17:59:11

常见的路由跳转有以下四种:

1. <router-link to="跳转路径"> 

/* 不带参数 */
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
// 更建议用name
// router-link链接中,带'/' 表示从根路径开始,不带 表示从当前路由开始


/* 带参 */
// 1. params传参
<router-link :to="{name:'home', params: {id:1}}">
// 路由配置 用 path: "/home/:id" 或者 path: "/home:id"
// 配置path,刷新页面参数保留;不配置path,刷新页面后 参数会消失

// html 取参 $router.params.id
// script 取参 this.$router.params.id


// 2 query传参
<router-link :to="{name:'home', query: {id:1}}">
// 路由可不配置

// html 取参 $router.query.id
// script 取参 this.$router.query.id

也可,如

2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面)

/* 不传参 或 query传参 */
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

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



/* params传参 */
this.$router.push({name:'home', params: {id:'1'}})
this.$router.push({path:'/home', params: {id:'1'}})
//注: params传参只能用name
//配置path,刷新页面参数保留;不配置path,刷新参数消失


/* query和params的区别 */
// query类似于 get 请求,跳转后页面url会拼接参数,如?id=1。-->适用于 非重要的参数
// params 类似于post,不拼接参数,刷新页面后参数消失。--->适用于 安全性较高的参数,如密码

html中,如:

3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页)

4. this.$router.go(n) 向前或向后跳转 n 个页面,n可正可负。 

使用后三种 需要在<script setup>中 导入

import router from '@/router';

参考:路由之间跳转的方式_路由跳转几种方式_时间管理maste的博客-CSDN博客

路由跳转几种方法_路由跳转的方式有哪几种_丶凡人的博客-CSDN博客

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

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

相关文章

sql:SQL优化知识点记录(八)

&#xff08;1&#xff09;索引面试题分析 所谓索引&#xff1a;就是排好序的快速查找数据结构&#xff0c;排序家查找是索引的两个用途 select * 在where使用到了索引&#xff0c;当select * 有模糊查询%在左边索引会失效 当select * where后面索引的顺序发生变化&#xff0…

51单片机项目(7)——基于51单片机的温湿度测量仿真

本次做的设计&#xff0c;是利用DHT11传感器&#xff0c;测量环境的温度以及湿度&#xff0c;同时具备温度报警的功能&#xff1a;利用两个按键&#xff0c;设置温度阈值的加和减&#xff0c;当所测温度大于温度阈值的时候&#xff0c;蜂鸣器就会响起&#xff0c;进行报警提示。…

浅谈MES系统中的物料管理

导 读 ( 文/ 2269 ) 物料管理是对企业在生产中使用的各种物料的采购、保管和发放环节进行计划与控制等管理活动的总称。物料管理是企业生产执行的基础&#xff0c;它接收来自生产执行层的物料请求&#xff0c;通过一系列物料管理活动的执行&#xff0c;对生产执行层进行及…

长城网络靶场,第一题笔记

黑客使用了哪款扫描工具对论坛进行了扫描&#xff1f;&#xff08;小写简称&#xff09; 第一关&#xff0c;第三小题的答案是awvs 思路是先统计查询 然后过滤ip检查流量 过滤语句&#xff1a;tcp and ip.addr ip 114.240179.133没有 第二个101.36.79.67 之后找到了一个…

【MATLAB第71期】基于MATLAB的Abcboost自适应决策树多输入单输出回归预测及多分类预测模型(更新中)

【MATLAB第71期】基于MATLAB的Abcboost自适应决策树多输入单输出回归预测及多分类预测模型&#xff08;更新中&#xff09; 一、效果展示&#xff08;多分类预测&#xff09; 二、效果展示&#xff08;回归预测&#xff09; 三、代码获取 CSDN后台私信回复“71期”即可获取下…

Linux中Tomcat发布war包后无法正常访问非静态资源

事故现象 在CentOS8中安装完WEB环境&#xff0c;首次部署WEB项目DEMO案例&#xff0c;发现可以静态的网页内容&#xff0c; 但是无法向后台发送异步请求&#xff0c;全部出现404问题&#xff0c;导致数据库数据无法渲染到界面上。 原因分析 CentOS请求中提示用来获取资源的连…

设计模式-7--代理模式(Proxy Pattern)

一、什么是代理模式&#xff08;Proxy Pattern&#xff09; 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许一个对象&#xff08;代理&#xff09;充当另一个对象&#xff08;真实对象&#xff09;的接口&#xff0c;以控制对该对象的…

Shell编程之cut

cut 命令从文件的每一行剪切字节、字符和字段并将这些字节、字符和字段写至标准输出&#xff0c;默认分割符是水平制表符。 如果不指定 File 参数&#xff0c; cut 命令将读取标准输入。必须指定 -b、-c 或 -f 标志之一。 基础语法&#xff1a; cut [参数选项] 文件名 参数&a…

Java抛出异常

当某个方法抛出了异常时&#xff0c;如果当前方法没有捕获异常&#xff0c;异常就会被抛到上层调用方法&#xff0c;直到遇到某个try ... catch被捕获为止 调用printStackTrace()可以打印异常的传播栈&#xff0c;对于调试非常有用&#xff1b;捕获异常并再次抛出新的异常时&am…

【Vue CLI】

node.js安装 https://nodejs.org/download/release/v15.14.0/ 管理员运行cmd node -v 安装npm npm install -g cnpm --registryhttps://registry.npm.taobao.org 查看是否安装成功 npm -v 注册淘宝镜像加速器 npm config set registry https://registry.npm.taobao.org/ 查看…

Windows下Redis的安装

文章目录 一,Redis介绍二,Redis下载三,Redis安装-解压四,Redis配置五,Redis启动和关闭(通过terminal操作)六,Redis连接七,Redis使用 一,Redis介绍 远程字典服务,一个开源的,键值对形式的在线服务框架,值支持多数据结构,本文介绍windows下Redis的安装,配置相关,官网默认下载的是…

Pygame中Trivia游戏解析6-1

1 Trivia游戏简介 Trivia的含义是“智力测验比赛中的各种知识”。Trivia游戏类似智力竞赛&#xff0c;由电脑出题&#xff0c;玩家进行作答&#xff0c;之后电脑对玩家的答案进行判断&#xff0c;给出结果并进行评分。该游戏的界面如图1所示。 图1 Trivia游戏界面 2 游戏流程 …

基于深度学习的三维重建从入门实战教程 原理讲解 源码解析 实操教程课件下载

传统的重建方法是使用光度一致性等来计算稠密的三维信息。虽然这些方法在理想的Lambertian场景下,精度已经很高。 但传统的局限性,例如弱纹理,高反光和重复纹理等,使得重建困难或重建的结果不完整。 基于学习的方法可以引入比如镜面先验和反射先验等全局语义信息,使匹配…

AI工业视觉如何“多快好省”落地产线?

一、AI工业视觉应用落地四大痛点 1.额外的硬件 运行深度学习的应用程序需要用到大量的内存和计算能力。通常只有将计算任务转移到额外的处理器&#xff08;如GPU显卡&#xff09;上同时执行计算&#xff0c;才能在可接受的短时间内完成处理工作。落地成本高。 2.发热量和功耗 …

电商平台api对接货源

如今&#xff0c;电商平台已经成为了人们购物的主要途径之一。 然而&#xff0c;对于电商平台来说&#xff0c;货源对接一直是一个比较棘手的问题。为了解决这个问题&#xff0c;越来越多的电商平台开始使用API来对接货源。 API&#xff0c;即应用程序接口&#xff0c;是一种允…

为什么要学习C++

操作系统历史 UINX操作系统诞生之初是用汇编语言编写的。随着UNIX的发展&#xff0c;汇编语言的开发效率成为一个瓶颈。寻找新的高效开发语言成为UNIX开发者需要解决的问题。当时BCPL语言成为了当时的选择之一。Ken Thomposn对BCPL进行简化得到了B语言。但是B语言不是直接生成…

全流程AI制作的视频广告来了,成本接近传统手法的千分之一……

图片来源&#xff1a;由无界AI生成 先看一下这个视频。 不知道你什么感受&#xff0c;我反正第一眼看的时候差点给跪了。 这是一个全流程用AI制作的视频啊&#xff01; 在手机或是电脑小窗口观看&#xff0c;很难看出来是AI做的。当然&#xff0c;对AI创作有些了解的人会“一眼…

【Rust】001-基础语法:变量声明及数据类型

【Rust】001-基础语法&#xff1a;变量声明及数据类型 文章目录 【Rust】001-基础语法&#xff1a;变量声明及数据类型一、概述1、学习起源2、依托课程 二、入门程序1、Hello World2、交互程序代码演示执行结果 3、继续上难度&#xff1a;访问链接并打印响应依赖代码执行命令 三…

mac帧 arp

1.分片 2.MSS max segment size 3.跨网络的本质 就是经历很多的子网或者局域网 4.将数据从A主机跨网络送到B主机的能力 IP和mac IP解决的是路径选择的问题 5.数据链路层 用于两个设备&#xff08;同一种数据链路节点&#xff09;之间进行传递 6.以太网ether 7.局域网通…

Django传递dataframe对象到前端网页

在django前端页面上展示的数据&#xff0c;还是使用django模板自带的语法 方式1 不推荐使用 直接使用 【df.to_html(indexFalse)】 使用to_html他会生成一个最基本的表格没有任何的样式&#xff0c;一点都不好看&#xff0c;如果有需要的话可以自行修改表格的样式&#xff0c;…