详解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控制上传文件的大小
Oct 26 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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 session安全问题分析
2011/06/24 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
js获取class的所有元素
2013/03/28 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
在Django中创建动态视图的教程
2015/07/15 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python3.x实现base64加密和解密
2019/03/28 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
开水果连锁店创业计划书
2013/12/29 职场文书
国窖1573广告词
2014/03/21 职场文书
《画》教学反思
2014/04/14 职场文书
微电影大赛策划方案
2014/06/05 职场文书
2016年元旦致辞
2015/08/01 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis