常见路由跳转的几种方式

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

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.mzph.cn/news/67988.shtml

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

相关文章

elementUI可拖拉宽度抽屉

1&#xff0c;需求&#xff1a; 在elementUI的抽屉基础上&#xff0c;添加可拖动侧边栏宽度的功能&#xff0c;实现效果如下&#xff1a; 2&#xff0c;在原组件上添加自定义命令 <el-drawer v-drawerDrag"left" :visible.sync"drawerVisible" direc…

Unity 顶点vertices,uv,与图片贴图,与mesh

mesh就是组成3d物体的三角形们。 mesh由顶点组成的三角形组成&#xff0c;三角形的大小 并不 需要一样&#xff0c;由顶点之间的位置决定。 mesh可以是一个或者多个面。 贴图的原点在左下角&#xff0c;uv是贴图的坐标&#xff0c;数量和顶点数一样&#xff08;不是100%确定…

数据结构与算法学习(day1)

文章目录 前言本章目标简化版桶排序题目一题目二 前言 &#xff08;1&#xff09;我是一个大三的学生&#xff08;准确来说应该是准大三&#xff0c;因为明天才报名哈哈哈&#xff09;。 &#xff08;2&#xff09;最近就想每天闲着没事也刷些C语言习题来锻炼下编程水平&#x…

StringIO BytesIO

上一篇中我们介绍了文件的基本读写操作&#xff0c;但是很多时候数据的读写并不一定都是在文件中&#xff0c;我们也可以在内存中读写数据&#xff0c;因此引出我们今天的主要内容&#xff0c;即 StringIO 和 BytesIO&#xff0c;让你学会在内存中进行数据的基本读写操作。 1 …

PKU校园网连接失败

校园网连接失败 连上校园网&#xff0c;显示已经连接但是没有网络&#xff0c;手动输入校园网门户( its.pku.edu.cn )也没有用。 使用 windows自带的疑难解答&#xff0c;分析发现dns解析异常。 解决方案 手动配置IPV4的dns。 同学的电脑可以正常连接dns&#xff0c;将同学…

Vue3 el-tooltip 根据内容控制宽度大小换行和并且内容太短不显示

el-tooltip 根据长度自适应换行以及显隐 环境 vue: "3.2.37" element-ui: "2.1.8"要求 tooltip 根据内容自动换行如果内容超出显示省略号显示&#xff0c;不超出不显示 tooltip 代码 组件 // ContentTip 组件 <template><el-tooltipv-bind&qu…

【数学建模竞赛】超详细Matlab二维三维图形绘制

二维图像绘制 绘制曲线图 g 是表示绿色 b--o是表示蓝色/虚线/o标记 c*是表示蓝绿色(cyan)/*标记 ‘MakerIndices,1:5:length(y) 每五个点取点&#xff08;设置标记密度&#xff09; 特殊符号的输入 序号 需求 函数字符结构 示例 1 上角标 ^{ } title( $ a…

初识c++

文章目录 前言一、C命名空间1、命名空间2、命名空间定义 二、第一个c程序1、c的hello world2、std命名空间的使用惯例 三、C输入&输出1、c输入&输出 四、c中缺省参数1、缺省参数概念2、缺省参数分类3、缺省参数应用 五、c中函数重载1、函数重载概念2、函数重载应用 六、…

数据分析之面试题目汇总

1、解释数据清洗的过程及常见的清洗方法。 数据清洗是指在数据分析过程中对数据进行检查、处理和纠正的过程&#xff1b;是数据预处理的一步&#xff0c;用于处理数据集中的无效、错误、缺失或冗余数据 常见的清洗方法包括&#xff1a;处理缺失值、处理异常值、去除重复值、统一…

强化学习算法总结 (1)

强化学习算法总结 (1) 1.综述 强化学习是通过与环境进行交互&#xff0c;来实现目标的一种计算方法。 s − a 1 − r − s ′ s - a_1 - r- s s−a1​−r−s′ 1.1强化学习优化目标 p o l i c y a r g m a x p o l i c y E ( a , s ) [ r e w a r d ( s , a ) ] policy ar…

CSS实现隐藏滚动条但可以滚动

场景 隐藏滚动条&#xff0c;但可以滚动 解决 全局样式 /* 隐藏滚动条 */ .outer-container::-webkit-scrollbar {width: 0; /* 设置滚动条的宽度为0 */background-color: transparent; /* 设置滚动条背景为透明 */ }/* 自定义滚动条轨道样式 */ .outer-container::-webkit…

day37:网编day4,多点通信和并发服务器

一、广播接收方&#xff1a; #include <myhead.h>#define ERR_MSG(msg) do{\ fprintf(stderr,"__%d__\n",__LINE__);\ perror(msg);\ }while(0)#define BRD_IP "192.168.114.255" #define BRD_PORT 8888int main(int argc, const char *argv[]) {//…

three.js 场景中如何彻底删除模型和性能优化

three.js 场景中如何彻底删除模型和性能优化 删除外部模型 在three.js场景中&#xff0c;要彻底删除外部模型&#xff0c;需要执行以下几个步骤&#xff1a; 从场景中移除模型 你可以使用 scene.remove(model) 或者 scene.remove(model.children[0]) 将模型从场景中移除。如果…

【⑰MySQL】 变量 | 循环 | 游标 | 处理程序

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL变量 | 循环 | 游标 | 处理程序的分享✨ 目录 前言1. 变量1.1系统变量1.2 用户变量 2. 定义条件与处理程序2.1 案例分析2.2 定义条件2.3 定义处理程序2.4 案例解决 3. 流程控制3.1 分支结构3.2 循环结构3.3 跳转…

ELK安装、部署、调试 (八)logstash配置语法详解

input {#输入插件 }filter {#过滤插件 }output {#输出插件 } 1.读取文件。 使用filewatch的ruby gem库来监听文件变化&#xff0c;并通过.sincedb的数据库文件记录被监听日志we年的读取进度&#xff08;时间 搓&#xff09; 。sincedb数据文件的默认路径为<path.data>/…

sentinel-core

引入依赖<dependencies><dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-core</artifactId></dependency><dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-anno…

Revit SDK 介绍:DWGFamilyCreation 导入DWG

前言 这个例子介绍了如何导入 DWG。 内容 核心逻辑代码&#xff1a; // 设置导入选项 DWGImportOptions options new DWGImportOptions(); options.Placement Autodesk.Revit.DB.ImportPlacement.Origin; options.OrientToView true; ElementId elementId null; // 导入…

【Vue2.0源码学习】生命周期篇-初始化阶段(initInjections)

文章目录 1. 前言2. initInjections函数分析resolveInject函数分析 3. 总结 1. 前言 本篇文章介绍生命周期初始化阶段所调用的第四个初始化函数——initInjections。从函数名字上来看&#xff0c;该函数是用来初始化实例中的inject选项的。说到inject选项&#xff0c;那必然离…

labview卸载重装碰到的问题

目录 labeiw卸载重装过程当中总是碰到一些问题&#xff0c;记录一下解决办法&#xff0c;碰到后好查找。 个人推荐卸载 用laview自带的卸载软件进行卸载&#xff0c;卸载的比较干净。 卸载完全第一步 启动 labview自带的卸载软件进行卸载。一般进行完这一步&#xff0c;就…

设计模式-9--迭代器模式(Iterator Pattern)

一、什么是迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;用于提供一种统一的方式来访问一个聚合对象中的各个元素&#xff0c;而不需要暴露该聚合对象的内部结构。迭代器模式将遍历集合的责任从集合对象中分离出来&#xf…