1. 程式人生 > >vue-router 2.0 跳轉之router.push()

vue-router 2.0 跳轉之router.push()

router.push(location)
除了使用 建立 a 標籤來定義導航連結,我們還可以藉助 router 的例項方法,通過編寫程式碼來實現。
router.push(location)
想要導航到不同的 URL,則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄,所以,當用戶點選瀏覽器後退按鈕時,則回到之前的 URL。

當你點選 <router-link> 時,這個方法會在內部呼叫,所以說,點選 等同於呼叫 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});

相關推薦

vue-router 2.0 router.push()

router.push(location) 除了使用 建立 a 標籤來定義導航連結,我們還可以藉助 router 的例項方法,通過編寫程式碼來實現。 router.push(location)

vue-router 2.0 傳參、傳遞多個引數

在vue專案中,往往會遇到這樣的情況,就是要實現在一文章列表中,點選其中一條跳轉到下個頁面,然後將這一條的相關資料帶到下個頁面中顯示,無論點哪一條都是跳到相同的頁面結構(下一個頁面的頁面使用的元件是一樣的),只是填的資料不一樣,這個時候就需要實現跳轉的時候一起把引數攜帶過去。

vue-router 2.0 常用基礎知識點router.push()

als 返回 ack name rep targe 代碼 添加 clas 轉載地址:http://www.jianshu.com/p/ee7ff3d1d93d router.push(location) 除了使用 <router-link> 創建 a 標簽來

Vue.js 2.0全家桶系列(vuevue-router、axios、vuex)

get set style pack inf del 常用指令 百度網盤 大綱 基於Vue.js 2.3版本, 全面講解Vue.js的教學視頻,讓你少走彎路,直達技術前沿!包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、w

vue-router 2.0 常用基礎知識點router.push()

router.push(location) http://www.jianshu.com/p/ee7ff3d1d93d 除了使用 <router-link> 建立 a 標籤來定義導航連結,我們還可以藉助 router 的例項方法,通過編寫程式碼來實現。 ro

Vue.js 2.0全家桶系列視訊課程(vuevue-router、axios、vuex)-湯小洋-專題視訊課程...

Vue.js 2.0之全家桶系列視訊課程(vue、vue-router、axios、vuex)—1048人已學習 課程介紹        基於新的Vue.js 2.3版本, 目前新全的Vue.js教學視訊,讓你少走彎路,直達技術前沿! 1. 包含Vue.js全家桶(vue.j

vue-router使用next()到指定路徑時會無限迴圈

我在路由為 /path 的頁面這樣寫 beforeRouteLeave (to, from, next) { console.log('離開路路由') if(to.fullPath==='/home'){ next(); }el

vue-router 2.0 改變的內容總結一下

最近在學習個過程中遇到了不少坑點,整理一下襬出來讓大家注意一下吧:2.x 版本的 vue-router 相比之前的0.7.x版本,有很多破壞性改變:一、通用 API 的修改1、The old router.go() is now router.push()2、新的 route

Vue整合vue-router實現頁面出現的問題

1、配置router資料夾下index.js,配置方式一 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/', // 首頁

angular ui-router 路由預設語句$urlRouterProvider.otherwise(‘路徑');與共用時存在的問題

當angular路由設定預設跳轉路徑$urlRouterProvider.otherwise(‘default'),並且頁面存在<a>標籤並且<a>標籤設定屬性href="###"即<a href="###></a>時,每次點

react-router v4 路由 動態引數

react-router v4 路由跳轉 react-router v4 路由傳參 使用 withRouter withRouter高階元件,提供了history讓你使用~ import React

Vue.js 2.0全家桶系列視訊課程——筆記(五)

一、 準備工作 ###1. 初始化專案 vue init webpack itany cd itany cnpm install cnpm install less less-loader -D

用weexplus從0到1寫一個app(2)-頁面和文章列表及文章詳情的編寫

則無 eight o-k 目前 use 跟著 ext methods 分別是 說明 結束連續幾天的加班,最近的項目終於告一段落,今天抽點時間開始繼續寫我這篇拖了很久的《用weexplus從0到1寫一個app》系列文章。寫這篇文章的時候,weexplus的作者已經把weexp

vue.js 2.0中使用less

webpack b- red sta pla pack block pre shee 說明,使用的是npm init webpack 項目名方式創建的項目,無需手動配置webpack 1.安裝less依賴 npm install less less-loader --s

JSP與Servlet後臺頁面單條刪除與多條刪除的頁面實現

.get func rac web nbsp pre resp har 做的 單條刪除頁面跳轉 1、首先打開JSP頁面,找到刪除 2、這個時候要把它改成servlet的URL,並決定要傳給後臺什麽數據,例如我需要傳一個待刪數據的ID id並不是什麽見不得

Vue.js 2.0 由淺入深,第一天 day01

vue.js vue vuex axios 湯小洋 湯老師 ### Vue.js 五天 *湯小洋*## 一、 Vue.js簡介### 1. Vue.js是什麽 **Vue.js**也稱為Vue,讀音/vju:/,類似view,錯誤讀音v-u-e 版本:v1.0 v2.0 + 是一

vue2.0後頁面滾動條BUG

document 滾動 blog scrolltop def route body watch pan export default { watch:{ ‘$route‘:function(to,from){

.NET Core 2.0遷移技巧MemoryCache問題修復

命名空間 ram ons ret http option ext obj mar 對於傳統的.NET Framework項目而言,System.Runtime.Caching命名空間是常用的工具了,其中MemoryCache類則常被用於實現內存緩存。 .NET Core

vue實現非路由以及數據傳遞

mage cnblogs out src 自主 home gif default ole 定義一個父組件 <template> <v-layout> <v-card contextual-style="dark"

node+webpack環境搭建 vue.js 2.0 基礎學習筆記

build tao 2.0 png 模板 gis mage tps 環境 npm install -g vue //全局安裝vue npm install -g webpack //全局安裝webpack npm install -g vue-cli