当前位置: 首页 > news >正文

常见路由跳转的几种方式

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

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博客

相关文章:

常见路由跳转的几种方式

常见的路由跳转有以下四种&#xff1a; 1. <router-link to"跳转路径"> /* 不带参数 */ <router-link :to"{name:home}"> <router-link :to"{path:/home}"> // 更建议用name // router-link链接中&#xff0c;带/ 表示从根…...

25.选择排序,归并排序,基数排序

目录 一. 选择排序 &#xff08;1&#xff09;简单选择排序 &#xff08;2&#xff09;堆排序 二. 归并排序 三. 基数排序 四. 各种排序方法的比较 &#xff08;1&#xff09;时间性能 &#xff08;2&#xff09;空间性能 &#xff08;3&#xff09;排序方法的稳定性能…...

DataX DorisWriter 插件DorisStreamLoadObserver类详细解读

DorisStreamLoadObserver 类是一个用于将数据加载到 Doris&#xff08;以前称为 Palo&#xff09;数据库中并监视加载过程的 Java 类。该类提供了一组方法&#xff0c;用于构建 HTTP 请求、处理 HTTP 响应以及监控数据加载的状态。以下是每个方法的具体作用&#xff1a; Doris…...

leetcode:1710. 卡车上的最大单元数(python3解法)

难度&#xff1a;简单 请你将一些箱子装在 一辆卡车 上。给你一个二维数组 boxTypes &#xff0c;其中 boxTypes[i] [numberOfBoxesi, numberOfUnitsPerBoxi] &#xff1a; numberOfBoxesi 是类型 i 的箱子的数量。numberOfUnitsPerBoxi 是类型 i 每个箱子可以装载的单元数量。…...

Spring_JDBC的使用

Spring 是个一站式框架&#xff1a;Spring 自身也提供了控制层的 SpringMVC和持久层的 Spring JdbcTemplate。 配置信息 1.下载 Spring JdbcTemplate 的 jar 包,在pom.xml中导入 <dependency><groupId>org.springframework</groupId><artifactId>spr…...

【Python从入门到进阶】34、selenium基本概念及安装流程

接上篇《33、使用bs4获取星巴克产品信息》 上一篇我们介绍了如何使用bs4来解析星巴克网站&#xff0c;获取其产品信息。本篇我们来了解selenium技术的基础。 一、什么是selenium&#xff1f; Selenium是一种用于自动化Web浏览器操作的开源工具。它提供了一组API&#xff08;应…...

如何确保ChatGPT在文本生成中遵循道德和伦理准则?

确保ChatGPT在文本生成中遵循道德和伦理准则是一个复杂而重要的任务。人工智能&#xff08;AI&#xff09;系统&#xff0c;特别是语言模型&#xff0c;具有强大的生成能力&#xff0c;但如果不受到道德和伦理准则的约束&#xff0c;可能会导致一系列问题&#xff0c;包括歧视、…...

RISC-V Linux系统rootfs制作

文章目录 1、下载2、配置与编译3、运行 buildroot 是一个构建嵌入式Linux系统的框架。整个 buildroot 是由Makefile(*.mk) 脚本和 Kconfig(Config.in) 配置文件构成的&#xff0c;因此可以像配置 Linux 内核一样执行 make menuconfig 进行配置&#xff0c;编译出一个完整的、可…...

git常用场景记录 | 拉取远程分支A合并到本地分支B

文章目录 git常用场景记录拉取远程分支A合并到本地分支B本地分支B存在未add与commit的代码 git常用场景记录 doing&#xff0c;最后更新9.1 拉取远程分支A合并到本地分支B 需求描述 在团队合作时&#xff0c;我自己的本地分支B功能已经实现并合并到feature&#xff0c;之后发现…...

如何利用Linux进行数据管理和分析?

Linux是一款非常强大的操作系统&#xff0c;它不仅可以帮助你管理数据&#xff0c;还可以让你成为一名数据分析大师。只要你会使用命令行&#xff0c;你就可以用Linux进行数据管理和分析。 现在&#xff0c;让我们来看看如何使用Linux进行数据管理。 使用sort命令对数据进行排…...

vue3封装echarts图表数据无法渲染到页面

问题是后端的数据已经成功返回到前端了&#xff0c;但是Echarts图表一直不能被渲染&#xff0c;卡了一个多小时&#xff0c;最后问gpt才解决&#xff08;gptyyds&#xff01;&#xff01;&#xff01;&#xff09; methods: {loadGet() {this.$axios.get(this.$httpUrl /goods…...

MySQL索引,事务和存储引擎

一、索引 1、索引的概念 ●索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于C语言的链表通过指针指向数据记录的内存地址&#xff09;。 ●使用索引后可以不用扫描全表来定位某行的数据&#xff0c;而是先…...

开发指导—利用CSS动画实现HarmonyOS动效(一)

注&#xff1a;本文内容分享转载自 HarmonyOS Developer 官网文档 一. CSS 语法参考 CSS 是描述 HML 页面结构的样式语言。所有组件均存在系统默认样式&#xff0c;也可在页面 CSS 样式文件中对组件、页面自定义不同的样式。请参考通用样式了解兼容 JS 的类 Web 开发范式支持的…...

电商项目part10 高并发缓存实战

缓存的数据一致性 只要使用到缓存&#xff0c;无论是本地内存做缓存还是使用 redis 做缓存&#xff0c;那么就会存在数据同步的问题。 先读缓存数据&#xff0c;缓存数据有&#xff0c;则立即返回结果&#xff1b;如果没有数据&#xff0c;则从数据库读数据&#xff0c;并且把…...

MongoDB实验——MongoDB shell操作

MongoDB shell操作 实验原理 MongoDB shell是一个可执行文件&#xff0c;是MongoDB自带的一个交互式JavaScript shell&#xff0c;位于MongoDB安装路径下的/bin文件夹中。要启动MongoDB shell&#xff0c;可执行命令mongo。这将在控制台提示符中启动该shell&#xff0c;Mongo…...

数据分析师职业发展道路,工作内容是什么?

很多同学问&#xff0c;参加数据分析就业班后之的就业发展道路是怎样的&#xff0c;工作又能做什么呢&#xff1f; 市面上的常见的工作类型有有运营类、技术类及分析类等&#xff0c;可以根据自己的意愿去做适合自己的工作&#xff0c;但是任何工作其实都是需要一技之长。…...

Vue3 + ts的使用

一. IDE的配置 1. VSCode 插件安装搜索builtin typescript 2. 点击“TypeScript and JavaScript Language Features”右下角的小齿轮&#xff0c;然后选择“Disable (Workspace)” 3. 重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。 二. 依赖的…...

CF Edu152 C

Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 首先&#xff0c;观察样例可知 这种是等效的 推广一下 0000.....111111 ..l..............r...... 这种是等效的 容易想到维护后面第一个1的位置和前面第一个0的位置&#xff0c;然后把所有区间都等效一下&…...

iBooker 技术评论 20230902

一、女子同时供职 16 家公司却从不上班&#xff0c;全国骗薪群体至少有七八百人&#xff0c;为何会出现此类骗薪群体&#xff1f; 社保其实很好绕过。就是这些骗薪者一起创立一个外包公司&#xff0c;然后通过这个公司把自己外包出去。这些人和外包公司签的是劳务合同&#xf…...

视频动态壁纸 Dynamic Wallpaper for Mac中文

Dynamic Wallpaper是一款Mac平台上的动态壁纸应用程序&#xff0c;它可以根据时间等因素动态切换壁纸&#xff0c;提供更加生动和多样化的桌面体验。 Dynamic Wallpaper包含了多个动态壁纸&#xff0c;用户可以根据自己的喜好选择和切换。这些动态壁纸可以根据时间等因素进行自…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...