对vue2.0中.vue文件页面跳转之.$router.push的用法详解

 更新时间:2018年08月24日 15:53:31   作者:侦探小禾子   我要评论

今天小编就为大家分享一篇对vue2.0中.vue文件页面跳转之.$router.push的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是:

<router-link to="/miniCard/statement/horizon">
  <button class="btn btn-default colorDe">继续</button>
</router-link>

但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .$router.push ,用法如下:

this.$router.push({path: '/...'});

希望本文对您有所帮助!

拓展知识:解决this.$router.push无法在新窗口打开的问题

如下所示:

let routeData = this.$router.resolve({ path: '/reportpreview', query: { id: id } });
 window.open(routeData.href, '_blank');

以上这篇对vue2.0中.vue文件页面跳转之.$router.push的用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • vue.js 实现点击按钮动态添加li的方法

    vue.js 实现点击按钮动态添加li的方法

    今天小编就为大家分享一篇vue.js 实现点击按钮动态添加li的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js学习之vue-cli定制脚手架详解

    vue.js学习之vue-cli定制脚手架详解

    这篇文章主要给大家介绍了vue.js学习之vue-cli定制脚手架的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • vue2里面ref的具体使用方法

    vue2里面ref的具体使用方法

    本篇文章主要介绍了vue2里面ref的具体使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。下面这篇文章主要给大家介绍了关于vue中各组件之间传递数据的方法示例,需要的朋友可以参考学习。
    2017-07-07
  • Vue项目部署在Spring Boot出现页面空白问题的解决方案

    Vue项目部署在Spring Boot出现页面空白问题的解决方案

    这篇文章主要介绍了Vue项目部署在Spring Boot出现页面空白问题的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue-cli3 项目从搭建优化到docker部署的方法

    vue-cli3 项目从搭建优化到docker部署的方法

    这篇文章主要介绍了vue-cli3 项目从搭建优化到docker部署的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue解决弹出蒙层滑动穿透问题的方法

    vue解决弹出蒙层滑动穿透问题的方法

    这篇文章主要介绍了vue解决弹出蒙层滑动穿透问题的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈Vue数据响应

    浅谈Vue数据响应

    这篇文章主要介绍了浅谈Vue数据响应,Vue的数据响应主要是依赖了Object.defineProperty(),下面就具体来介绍一下如何实现数据响应
    2018-11-11
  • Vue项目使用CDN优化首屏加载问题

    Vue项目使用CDN优化首屏加载问题

    这篇文章主要介绍了Vue项目使用CDN优化首屏加载问题,本文以vue、vuex、vue-touter为例,给大家介绍处理流程,需要的朋友可以参考下
    2018-04-04
  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    这篇文章主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
    2019-05-05

最新评论