vue-router 跳轉頁面傳遞引數並獲取引數
一、跳轉頁面
有些時候我們從A頁面跳轉到B頁面需要傳遞一個或多個引數,例如從列表頁進入詳情頁
程式碼:
<router-link :to="{path:'/detail',query:{id:item.id,a:1}}">{{item.title}}</router-link>
path:要跳入頁面的路徑
query: 就是想要傳遞的引數,可以為一個也可以多個。這樣路徑就會被渲染成這樣
二、獲取引數
使用 this.$router.query 即可獲取到傳遞的引數
例如獲取上圖中位址列的引數:
tab: _this.$route.query.tab,
a:_this.$route.query.a,
這樣就能獲取到引數,返回的是一個key/Value的物件,this.$router.query.a ==1,若沒有,則返回一個空物件
需要注意的是:
1、在方法中使用 this.$router.query 可能得到undefined。因為這個this可能指代的是該方法中的,而不是vue的,所以需要將this
重回賦給一個變數代替就可以獲得
若有不正確的地方,請指正。謝謝
相關推薦
vue-router 跳轉頁面傳遞引數並獲取引數
一、跳轉頁面 有些時候我們從A頁面跳轉到B頁面需要傳遞一個或多個引數,例如從列表頁進入詳情頁 程式碼: <router-link :to="{path:'/detail',query:{id:item.id,a:1}}">
Vue-Vue-router跳轉頁面時返回頂部
pre 創建 brush AC osi next 通過 clas out 第一種方法:main.js router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 第二種方法: 在創
Vue 爬坑之路(三)—— 使用 vue-router 跳轉頁面
cli 分類 ace local outer log 適合 創建 start 使用 Vue.js 做項目的時候,一個頁面是由多個組件構成的,所以在跳轉頁面的時候,並不適合用傳統的 href,於是 vue-router 應運而生。 官方文檔: https://router.v
vue中vue-router跳轉頁面返回頂部
第一種方法:main.js router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 第二種方法: 在建立router例項時,做如下的配置 savedPosition當且僅當通過瀏覽器的前進/後退按鈕觸
關於vue路由跳轉頁面帶引數方法總結
因為最近專案有這樣一個需求:在首頁導航欄顯示訊息數,點選每一條未讀訊息帶著引數跳轉到相應頁面進行顯示,網上查了好些辦法,比如a元件跳轉到b元件: 對於a元件有幾種方式: 1.純頁面跳轉 <template> <div> <router-lin
React學習及實例開發(三)——用react-router跳轉頁面
con 版本 wid css strong extends fault img doc 本文基於React v16.4.1 初學react,有理解不對的地方,歡迎批評指正^_^ 一、定義路由 1、安裝react-router npm install react-route
vue router跳轉方法
his 指定 tail 區別 用法 ont src 2.0 term 1.this.$router.push() 描述:跳轉到不同的url,但這個方法會向history棧添加一個記錄,點擊後退會返回到上一個頁面。 用法: 2.this.$router.replace()
vue router 跳轉到新的視窗方法
在CreateSendView2.vue 元件中的方法定義點選事件,vue router 跳轉新的視窗通過採用如下的方法可以實現傳遞引數跳轉相應的頁面goEditor: function (index,channel) { //跨域的方法傳遞引數(參見 let routeData = this.$rout
vue router 跳轉後回到頂部
在main.js中加上這段程式碼 // 跳轉後返回頂部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })
【vue】vue-router跳轉路徑url多種格式
1.形如 http://localhost:8080/#/book?id=**** ①路由配置 ②路由定向連結,以query傳參id 另外,獲取query傳遞的引數id用 t
vue-router 跳轉中斷,iview的menu元件高亮不變
vue-router 跳轉中斷,iview的menu元件高亮不變 場景:編輯頁有儲存與取消編輯按鈕,使用者編輯後未儲存頁面就進行跳轉行為,彈框提醒使用者是否繼續跳轉,使用者點取消則停留在當前頁面。 技術點: 1. 使用 vue-router 的 beforeRouteLeave 鉤子在路由
vue實踐:vue-router跳轉
vue-router 跳轉(url變化頁面沒變化,是因為少下面的) route:{ data: function (transition) { this.params = transition.to
vue-router跳轉路由的幾種方式
// vue-router學習筆記 記錄開發中的點點滴滴 跳轉路由的幾種方式: 1、宣告式: 1) 根據路由路徑(/home/sort/detail)跳轉 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'
同前端跳轉頁面傳遞參數
目標 str escape 編輯 選擇 div 有時 null function 在編寫前端代碼的時候有時候需要傳遞前頁面相應得參數 在這裏介紹一個簡單得小方法<路由傳參> 首先 前端先寫一個點擊事件: 在script中用window.loc
html5之間跳轉頁面傳參,獲取資料以及跳轉後就執行頁面的js程式碼
本次解決的內容如標題:html5之間跳轉頁面傳資料以及跳轉後就執行頁面的js程式碼 舉個我的栗子:就是點選視訊圖片描述後,跳轉到播放該視訊的h5,因為跳轉後視訊播放頁面video標籤需要播放地址,一個視訊的話可以寫死地址,多個視訊的話,就要想寫幾十個h5...想想就難受,所以就需要兩個網頁之
vue.js中router.push跳轉頁面、帶引數、設定引數的方法
router.push(location) 在vue.js中想要跳轉到不同的 URL,需要使用 router.push 方法。 這個方法會向 history 棧新增一個新的記錄,當用戶點選瀏覽器後退按鈕時,則回到之前的 URL。 當你點選 <router-link> 時,這個
GridView實現超連結列和圖片列,跳轉頁面並傳遞引數
「注意!請勿私自轉載!」 最近在使用ASP.NET建設網站,需要解決如標題所示的問題,上網可以搜出很多答案。現在簡單總結一下我的解決辦法,方便各位取用,有任何疑問歡迎提出交流。 (注:使用V
vue使用路由進行頁面跳轉時傳遞引數
本文主要介紹了vue中使用路由進行頁面的跳轉時,vue的路由如何傳遞引數,第二個頁面如何獲取引數. 一. 通過router-link進行跳轉 <router-link :to=
vue路由跳轉 返回上一級 this.$router.go(-1) 和返回到指定頁面this.$router.push('/home')
name nbsp style span button pre 頁面 -c out 1,點擊返回上一頁<button @click="goback">goback</button> methods:{ goback(){} this.$route
跳轉頁面跨域傳遞引數
頁面a的網站地址為:http://localhost:8080/a.html 頁面b的網站地址為:http://localhost:63342/Demo1/testCRS/b.html?name=tony&age=23 其中,name和age是跨域傳遞的引數。 1.結果展示圖 頁