详解vue-router 2.0 常用基础知识点之router.push()


Posted in Javascript onMay 10, 2017

除了使用 <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});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
jquery构造器的实现代码小结
May 16 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
You might like
深入php之规范编程命名小结
2013/05/15 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
jquery里的each使用方法详解
2010/12/22 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python中logging模块的用法实例
2014/09/29 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
在keras里实现自定义上采样层
2020/06/28 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
大二法学专业职业生涯规划范文
2014/02/12 职场文书
财务主管岗位职责
2014/02/28 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android