详解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写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
动态加载js、css的实例代码
May 26 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue中template的三种写法示例
Oct 21 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 中的输出缓冲
2006/12/21 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
Python牛刀小试密码爆破
2011/02/03 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python日志logging模块使用方法分析
2019/05/23 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python中树与树的表示知识点总结
2019/09/14 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
主题班会演讲稿
2014/05/22 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
大学生自我评价范文
2015/03/03 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
详解Python常用的魔法方法
2021/06/03 Python
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫