Vue 编程式路由导航

news/2025/1/8 18:37:55/文章来源:https://www.cnblogs.com/wt7018/p/18660344

一、作用

不借助<router-link>实现路由跳转

二、路由 (push replace)

借助 $router 的push(保存浏览记录) 和replace(替换浏览记录) 与 query和params对象传参类似

1、push

触发

<button @click="pushShow(m)">push</button>

方法

name 是 path的别名, params 传递参数的一种方式

methods: {pushShow(m){this.$router.push({name:'detail',params:{// key valueid: m.id,title: m.title }})},
}

2、replace

触发

<button @click="replaceShow(m)">replace</button>

方法

methods: {replaceShow(m){this.$router.replace({name:'detail',params:{id:m.id,title:m.title}})}
}

三、导航 (back forward go)

1、back

与浏览器自带的回退一样

$router.back()

2、forward

与浏览器自带的前进一样

$router.forward()

3、go

$router.go(n)

n为正数,则前进n步,n为负数,则后退n步

触发

<button @click="backButton">back</button>
<button @click="forwardButton">forward</button>
<button @click="goButton">go</button>

方法

 methods: {backButton(){// 后退this.$router.back()},forwardButton(){// 前进this.$router.forward()},goButton(){// 正数 前进 n,负数 后退 nthis.$router.go(2)}
},

 

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

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

相关文章

Omnivore 替代品 Readeck 安装与使用教程

前段时间 Omnivore 宣布服务关停,作为一个长期使用 Omnivore 的用户,我需要寻找替代方案。 我对替代品的核心需求是:浏览器插件:支持一键剪藏当前网页。 RSS 支持:能够输入 RSS 地址并定时抓取更新。 API 接口:可以通过 API 与我的 logseq 进行集成。寻找替代品的过程: …

前端之canvas实现电子签约完成线上签署功能

电子签名,下载带有签名的合同png/pdf格式,前端/vue实现电子签功能。最近发现现在租房还是签合同,越来越多采用电子签约的方式进行,好处不用多说节约成本,节约时间。抱着好奇的心理,尝试自己动手实现一个电子签。原来并不复杂主要通过了canvas绘画能力进行实现的。最近发现…

git怎么玩

首先如果是windos下个git bash 1.自己用git,用于本地和github的交互!

电流传感器HLSR50-P KX022-1020加速度计 LM27761DSGR稳压器 MAX14752EUE SAF7755HV音频 DSP规格、产品特征、及应用

分享电流传感器HLSR50-P KX022-1020加速度计 LM27761DSGR稳压器 MAX14752EUE SAF7755HV音频 DSP规格、产品特征、及应用1、HLSR50-P是一款开环霍尔效应电流传感器,主要用于电子测量直流、交流和脉冲电流,同时确保初级和次级电路之间的电隔离。HLSR50-P 电流传感器规格用于测量…

招行面试: 分布式调度 设计,要考虑 哪些问题?

本文原文链接 文章很长,且持续更新,建议收藏起来,慢慢读!疯狂创客圈总目录 博客园版 为您奉上珍贵的学习资源 : 免费赠送 :《尼恩Java面试宝典》 持续更新+ 史上最全 + 面试必备 2000页+ 面试必备 + 大厂必备 +涨薪必备 免费赠送 :《尼恩技术圣经+高并发系列PDF》 ,帮你 …

Idea中集成SceneBuilder以及使用讲解

目录1 Idea中集成SceneBuilder1.1 Idea中集成SceneBuilder1.2 SceneBuilder1.2.1 添加组件ControlsFX1.2.1.1页面展示1.2.2 hierarchy displays1.3 简单使用1.3.1 搭建项目1.3.2 fxml文件1.3.3 生成exe文件2 SceneBuilder页面讲解2.1 Properties窗口预览2.2 Text面板2.2.1 Text…

JavaFX基础之环境配置,架构,FXML

目录1 JavaFX1.1 简介1.2 环境准备1.2.1 手动管理依赖1.2.2 maven或Gradle管理1.3 JavaFX 架构1.3.1 JavaFX 架构图1.3.2 JavaFX组件1.3.2.1 舞台1.3.2.2 场景1.3.2.3 控件1.3.2.4 布局1.3.2.5 图表1.3.2.6 2D图形1.3.2.7 3D图形1.3.2.8 声音1.3.2.9 视频1.4 简单使用1.5 FXML1…

编译原理-期末

第一章编译原理的基础问答设 A机器 上有 语言L 的编译程序,可以用它来编制B机器上的语言的编译程序,试用 T形图 进行表示。 通过自展完成C语言的编写,试描述这个过程。 画出编译程序的总体结构图,简要说明每个模块的功能 如何理解“单词是程序设计语言中具有独立意义的最小…

ESP8266及继电器电路图解析

ESP8266及继电器介绍 ESP8266概述:ESP8266 是一款低成本、低功耗的 Wi-Fi 芯片,由乐鑫信息科技(Espressif Systems)开发。它集成了 TCP/IP 协议栈,能够实现串口与 Wi-Fi 之间的转换,广泛应用于物联网(IoT)领域,如智能家居、智能穿戴、工业控制等。 特点:低功耗:在睡…

docker-compose部署下Fastapi中使用sqlalchemy和Alembic

本篇介绍使用Fastapi + sqlalchemy + alembic 来完成后端服务的数据库管理,并且通过docker-compose来部署后端服务和数据库Mysql。包括:1. 数据库创建,数据库用户创建 2. 数据库服务发现 3. Fastapi 连接数据库 4. Alembic 连接数据库 5. 服务健康检查本篇介绍使用Fastapi +…

误删除了表?PolarDB MySQL帮你恢复!完成就送2025蛇年春联!

由于DDL语句无法回滚,如果误删除了表(例如DROP TABLE),可能会导致数据丢失。PolarDB MySQL提供表回收站的功能,删除的表会被临时转移到表回收站。 通过本次操作,带您体验如何使用PolarDB MySQL提供表回收站的功能,从表回收站恢复误删的表。 完成任务赢奖励,活动火热进行…

《墨香古韵:传统与现代的完美融合》——传世经典的美,划破时空的风格和型

《墨香古韵:传统与现代的完美融合》 由“解锁AI超能”的邦林AIGC出品 一直叹服古人用那样少的笔墨,就可以塑造一个让人无限联想、余味无穷的作品。 而上帝造人,诸多完美,唯独留下一个大大的Bug, 那就是人想象不出自己没见闻过的东西,而有大师也曾说过,人的想象力总是先于…