详解vue-router 2.0 常用基础知识点之router.push()
作者:NowTheFuture 发布时间:2024-04-09 10:49:35
标签:vue,router.push
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
router.push(location)
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。
声明式:<router-link :to="...">
编程式:router.push(...)
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。
// 字符串
router.push('home')
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
.then(({data: {code, content}}) => {
if (code === 0) {
// 对象
this.$router.push({path: '/home'});
}else if(code === 10){
// 带查询参数,变成/login?stage=stage
this.$router.push({path: '/login', query:{stage: stage}});
}
});
// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});
replace
类型: boolean
默认值: false
设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
//加上replace: true后,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写:
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)
综合案例
this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});
来源:http://blog.csdn.net/sinat_17775997/article/details/68941091
0
投稿
猜你喜欢
- 在Apache和FastCGI上使用Django,你需要安装和配置Apache,并且安装mod_fastcgi。 请参见Apache和mod
- 数组:【重点1】implode(分隔,arr) 把数组值数据按指定字符连接起来例如:$arr=array('1','
- 一.Jupyter介绍Jupyter Notebook是一个交互式笔记本,支持运行40多种编程语言。Jupyter Notebook 的本质
- 例子一:Python用WMI模块获取windowns系统的硬件信息:硬盘分区、使用情况,内存大小,CPU型号,当前运行的进程,自启动程序及位
- 本文内容速览1、绘图数据准备还是使用鸢尾花iris数据集#导入本帖要用到的库,声明如下:import matplotlib.pyplot a
- 因时间问题不可能一次写的很多,但我们会经常更新,方便大家。希望学习编程的朋友不要因为从网站复制了代码,而不能正常的运行而放弃。其实老鸟也是经
- 为了保证程序的健壮性与容错性,即在遇到错误时候程序不会崩溃,我们需要对异常进行处理,1.if进行处理,在错误发生之前进行预防如果错误发生的条
- 关于二分法的定义我就不说了,CSDN很多大牛和前辈都已经阐述的很清楚了,直接上代码。首先,先创建一个名称为 binary_search 的函
- 一、 使用Springboot+Jpa实现对mysql数据库的增删改查和分页功能JPA是Java Persistence API的简称,中文
- 本文实例讲述了Python使用Matplotlib实现雨点图动画效果的方法。分享给大家供大家参考,具体如下:关键点win10安装ffmpeg
- 1. 概述触发器是一种特殊的存储过程,它不能被显式地调用,而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活。 所以触发器可以用来实现
- 概念django自带一套信号机制来帮助我们在框架的不同位置之间传递信息。也就是说,当某一事件发生时,信号系统可以允许一个或多个发送者(sen
- 介绍我们可以通过for循环来迭代list、tuple、dict、set、字符串,dict比较特殊dict的存储不是连续的,所以迭代(遍历)出
- 具体代码如下:Function ASTCreateFtpSite(IPAddress, RootDirectory,&n
- 一、概述索引太少,查询效率低;索引太多程序性能受到影响,索引的使用应该贴合实际情况。Innodb 支持的索引包括:全文检索,使用倒排索引哈希
- 前言我们知道python中smtplib模块用于邮件的功能,而django对这个这模块进行封装,使得它使用起来十分简单。django.cor
- 1、前言前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用
- 问题介绍在安装torch之后,命令行(Anaconda Powershell Prompt)运行这三行代码:python # pythoni
- pytest概述pytest是一个非常成熟的全功能的Python测试框架,主要特点有以下几点:1、简单灵活,容易上手,文档丰富;2、支持参数
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java