详解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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
Vue实现穿梭框效果
Sep 30 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
33道php常见面试题及答案
2015/07/06 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python的依赖管理的实现
2019/05/14 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python unichr函数知识点总结
2020/12/16 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
入党推优材料
2014/06/02 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书