详解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


猜你喜欢
- DataLoader完整的参数表如下:class torch.utils.data.DataLoader( dataset, batch_s
- 前提条件,percona 5.6版本,事务隔离级别为RRmysql> show create table test_autoinc_l
- 前言大家应该经常在朋友圈看到有人发九宫格图片,其实质就是将一张图片切成九份,然后在微信中一起发这九张图即可。说到切图,Python 就可以实
- 前做PPT要用到折线图,嫌弃EXCEL自带的看上去不好看,就用python写了一个画折线图的程序。import matplotlib.pyp
- 关于tensor.repeat()的使用考虑到很多人在学习这个函数,我想在这里提 一个建议:强烈推荐 使用 einops 模块中的 repe
- PHP mysqli_thread_id() 函数返回当前连接的线程 ID,然后杀死连接:<?php// 假定数据库用户名:root,
- 本文实例为大家分享了Python多线程模拟火车站售票的具体代码,供大家参考,具体内容如下Python的标准库提供了两个模块:thread和t
- 问题定义一个int型的一维数组,包含10个元素,分别赋值为1~10, 然后将数组中的元素都向前移一个位置,即,a[0]=a[1],a[1]=
- 两个函数的原型为:np.identity(n, dtype=None)np.eye(N, M=None, k=0, dtype=<ty
- 本文实例讲述了Python数据分析之双色球基于线性回归算法预测下期中奖结果。分享给大家供大家参考,具体如下:前面讲述了关于双色球的各种算法,
- 前言在业务开展中,会遇到类似需求。需求1:UPDATE表TEST_TB01中的记录;满足条件:这些记录不在TEST_TB02中。需求2:UP
- 写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面,顺便再调用了一下美图的接口API:美图APIurlwxml:<vie
- char、varchar、text和nchar、nvarchar、ntext的区别1、CHAR。CHAR存储定长数据很方便,CHAR字段上的
- 时间序列是指在一段时间内发生的任何可量化的度量或事件。尽管这听起来微不足道,但几乎任何东西都可以被认为是时间序列。一个月里你每小时的平均心率
- 今天看了看数据备份相关的东西,总结了几个MySQL数据备份的注意事项,简单分享一下吧。 对于MySQL备
- 在Python中是没有Switch / Case语句的,很多人认为这种语句不够优雅灵活,在Python中用字典来处理多条件匹配问题字典会更简
- 最近要做数据库同步,如果网上找了例子,成功,记录下来,下回再看。这个是网上找的一编文章。以下配置在本机上已经成功:实现功能:A为主服务器,B
- var GB2312UnicodeConverter = { ToUnicode: function (
- python中可以使用下标索引来访问列表中的值,对列表进行切片即截取,也可以对列表的数据项进行修改或更新。使用下标索引来访问列表中的值,例如
- 安装 NumPy如果你已经在系统上安装了 Python 和 PIP,那么安装 NumPy 非常容易。请使用这条命令安装它:C:\Users\