快捷導(dǎo)航

對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解

更新時(shí)間：2018年08月24日 15:53:30 作者：偵探小禾子

今天小編就為大家分享一篇對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

vue2.0在使用的過(guò)程中， .vue文件之間的跳轉(zhuǎn)，在template中的常見(jiàn)寫(xiě)法是：

<router-link to="/miniCard/statement/horizon">
  <button class="btn btn-default colorDe">繼續(xù)</button>
</router-link>

但是有時(shí)的需求是頁(yè)面不直接跳轉(zhuǎn)，有確認(rèn)彈框或者其他事件，此時(shí)就需要在js中設(shè)置跳轉(zhuǎn)，常用的一種方法是 .$router.push ，用法如下：

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

希望本文對(duì)您有所幫助！

拓展知識(shí)：解決this.$router.push無(wú)法在新窗口打開(kāi)的問(wèn)題

如下所示：

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

以上這篇對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue 開(kāi)發(fā)模式下跨域問(wèn)題
本篇文章主要介紹了Vue 開(kāi)發(fā)模式下跨域問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue項(xiàng)目安裝使用vconsole方式
這篇文章主要介紹了vue項(xiàng)目安裝使用vconsole方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-11-11
vue iview實(shí)現(xiàn)動(dòng)態(tài)新增和刪除
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)動(dòng)態(tài)新增和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue基于session和github-oauth2實(shí)現(xiàn)登錄注冊(cè)驗(yàn)證思路詳解
通過(guò) sessionId 可以在 session 表中獲取用戶的信息,此外,還利用 session 表實(shí)現(xiàn)了GitHub 的 OAuth2 第三方登錄,本文講解前端通過(guò)簡(jiǎn)單的方式實(shí)現(xiàn)一個(gè)基本的登錄注冊(cè)驗(yàn)證功能,感興趣的朋友跟隨小編一起看看吧
2024-08-08
vue-cli webpack 引入jquery的方法
小編使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具體內(nèi)容詳情大家參考下本文
2018-01-01
Vue單頁(yè)應(yīng)用引用單獨(dú)的樣式文件的兩種方式
這篇文章給大家介紹Vue單頁(yè)應(yīng)用如何引用單獨(dú)的樣式文件，本文以css文件為例，通過(guò)兩種方式給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2018-03-03
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
vue中element-ui不能修改el-input框,或是不能修改某些值問(wèn)題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue-draggable實(shí)現(xiàn)pc端拖拽效果
這篇文章主要為大家詳細(xì)介紹了vue-draggable實(shí)現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
詳解Vue中Axios封裝API接口的思路及方法
這篇文章主要介紹了詳解Vue中Axios封裝API接口的思路及方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10