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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Prototype Date对象 学习
Jul 12 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
vuex的使用步骤
Jan 06 Vue.js
详谈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
php目录管理函数小结
2008/09/10 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
JavaScript中的事件处理
2008/01/16 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python文件写入实例分析
2015/04/08 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python异常的检测和处理方法
2018/10/26 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
详解python运行三种方式
2019/05/13 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
商务助理求职信范文
2014/04/20 职场文书
中专生自荐信
2014/06/25 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python