vue-router 2.0 跳转之router.push()用法说明


Posted in Javascript onAugust 12, 2020

router.push(location)

除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 等同于调用 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});

补充知识:解决从登录页通过this.$router.push跳转首页后 点返回健路由变而页面不变的问题

做H5项目的时候遇到一个问题,我从 login 登录页通过 this.$router.push({ name: 'home' })路由登录成功后跳转到首页,但在ios系统下,会有一个默认返回条,点击返回键出现以下情况,路由显示的是回到登录页,而页面却还是首页。

解决思路:

开始我试着把push改为replace,但是发现并没什么卵用,还是会出现问题,所以只好用路由导航守卫去监听。

在首页加入beforeRouteLeave,监听到to.name如果是login的话就不跳转,否则就跳转,然后问题就解决了。

beforeRouteLeave (to, from, next) {
  if (to.name === 'login') {
    next(false)// 不跳转
  } else {
    next() // 跳转到另一个路由
  }
}

vue-router 2.0 跳转之router.push()用法说明

以上这篇vue-router 2.0 跳转之router.push()用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 #Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 #Javascript
VsCode里的Vue模板的实现
Aug 12 #Javascript
typescript配置alias的详细步骤
Aug 12 #Javascript
js实现表格单列按字母排序
Aug 12 #Javascript
javascript的hashCode函数实现代码小结
Aug 11 #Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 #Javascript
You might like
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JsRender实用入门教程
2014/10/31 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
超实用的 30 段 Python 案例
2019/10/10 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
运动会的口号
2014/06/09 职场文书
党员志愿者活动总结
2014/06/26 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
外出考察学习心得体会
2016/01/18 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书