详解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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
javascript实现时钟动画
Dec 03 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
军训的自我鉴定
2013/12/10 职场文书
《日月潭》教学反思
2014/02/28 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
党支部承诺书范文
2014/03/28 职场文书
年终工作总结范文2014
2014/11/27 职场文书
体育活动总结
2015/02/04 职场文书
保护地球的宣传语
2015/07/13 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技