• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > 详解vue-router 2.0 常用基础知识点之router.push()

详解vue-router 2.0 常用基础知识点之router.push()

作者:NowTheFuture 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含router.push,this router.push,vue router.push,外汇基础知识详解,独立基础配筋图详解等相关知识,NowTheFuture 希望在学习及工作中可以帮助到您

除了使用 <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});
</div>

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(...)
</div>

综合案例

this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • 详解vue-router 2.0 常用基础知识点之router.push()

相关文章

  • 2017-05-30详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
  • 2017-05-30一个例子轻松学会Vue.js
  • 2017-05-30Vue 父子组件、组件间通信
  • 2017-05-30vue中渐进过渡效果实现
  • 2017-05-30vue实现todolist单页面应用
  • 2017-05-30基于vue的fullpage.js单页滚动插件
  • 2017-05-30详解Vue 普通对象数据更新与 file 对象数据更新
  • 2017-05-30vue.js实现含搜索的多种复选框(附源码)
  • 2017-05-30Vue.js——60分钟快速入门
  • 2017-05-30vue-hook-form使用详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue + socket.io实现一个简易聊天室示例代码
    • Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
    • 详解如何使用vue-cli脚手架搭建Vue.js项目
    • vue.js树形组件之删除双击增加分支实例代码
    • Vue.js路由组件vue-router使用方法详解
    • vue组件如何被其他项目引用
    • VueJS全面解析
    • Vue-resource实现ajax请求和跨域请求示例
    • Vue.js每天必学之指令系统与自定义指令
    • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有