vue router使用jquery和params傳參詳解
本文主要介紹了vue router使用query和params傳參的使用和區別,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
寫在前面:
傳參是前端經常需要用的一個操作,很多場景都會需要用到上個頁面的參數,本文將會詳細介紹vue router 是如何進行傳參的,以及一些小細節問題。有需要的朋友可以做一下參考,喜歡的可以點波贊,或是關註一下,希望可以幫到大家。
Vue router如何傳參
params、query是什麼?
params:/router1/:id ,/router1/123,/router1/789 ,這裡的id叫做params
query:/router1?id=123 ,/router1?id=456 ,這裡的id叫做query。
路由介面:
router.js:
路由設定這裡,當你使用params方法傳參的時候,要在路由後面加參數名,並且傳參的時候,參數名要跟路由後面設定的參數名對應。使用query方法,就沒有這種限制,直接在跳躍裡面用就可以。
注意:如果路由上面不寫參數,也是可以傳過去的,但不會在url上面顯示出你的參數,並且當你跳到別的頁面或是刷新頁面的時候參數會遺失(如下圖),那依賴這個參數的http請求或是其他操作就會失敗。
注意看上面的路由參數,id這個參數是我們有設定在路由上面的,id2我沒有設定在路由裡面,所以刷新之後id2就不見了,在專案中,我們總不可能要求用戶不能刷新吧。
元件1:
<template> <p class="app_page"> <h1>从这个路由传参到别的路由</h1> <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" > router-link跳转router1 </router-link> </p> </template> <script> export default { name: 'app_page', data () { return { status:110, status2:120, status3:119 } }, } </script>
編程式導覽跳轉:
上面的router-link傳參,也可以使用router文件裡面的編程式導覽跳傳參。
this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}); //编程跳转写在一个函数里面,通过click等方法来触发
這兩種傳參效果是一模一樣的,編程序導航,可以用來做判斷跳轉,比如是否授權,是否登錄,等等狀態,對此不太了解的小伙伴們,可以跳過這個編程式導航,以後再來看。
元件2:
<template> <p class="router1"> <h1>接收参数的路由</h1> <h1> params.id:{{ $route.params }}</h1> <h1>query.status:{{ $route.query.queryId }}</h1> <keep-alive> <router-view></router-view> </keep-alive> </p> </template>
傳參還是比較簡單的,按上面元件的使用方法就可以成功傳過去了。
提示:取得路由上面的參數,用的是$route,後面沒有r。
params傳參和query傳參有什麼差別:
1、用法上的
剛query要用path來引入,params要用name來引入,接收參數都是類似的,分別是this.$route.query.name和this.$route.params.name。
注意接收參數的時候,已經是$route而不是$router了哦! !
2、展示上的
query更類似我們ajax中get傳參,params則類似post,說的再簡單一點,前者在瀏覽器網址列顯示參數,後者則不顯示
query:
params:
3、params是路由的一部份,必須要有。 query是拼接在url後面的參數,沒有也沒關係。
params一旦設定在路由,params就是路由的一部分,如果這個路由有params傳參,但是在跳轉的時候沒有傳這個參數,會導致跳轉失敗或是頁面會沒有內容。
例如:跳轉/router1/:id
<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link> <router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>
4、params、query不設定也可以傳參,params不設定的時候,刷新頁面或回傳參數會遺失,這一點的在上面說過了
相關推薦:
以上是vue router使用jquery和params傳參詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

jQuery引用方法詳解:快速上手指南jQuery是一個受歡迎的JavaScript庫,被廣泛用於網站開發中,它簡化了JavaScript編程,並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法,並提供具體的程式碼範例,幫助讀者快速上手。引入jQuery首先,我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入,也可以下載

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:<

jQuery如何移除元素的height屬性?在前端開發中,經常會遇到需要操作元素的高度屬性的需求。有時候,我們可能需要動態改變元素的高度,而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性,並提供具體的程式碼範例。在使用jQuery操作高度屬性之前,我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

jQuery是一種流行的JavaScript庫,被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中,eq()方法是用來選擇指定索引位置的元素的方法,具體使用方法和應用場景如下。在jQuery中,eq()方法選擇指定索引位置的元素。索引位置從0開始計數,即第一個元素的索引是0,第二個元素的索引是1,依此類推。 eq()方法的語法如下:$("s

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬

jQuery是一個受歡迎的JavaScript函式庫,廣泛用於網頁開發。在網頁開發過程中,經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行,並提供具體的程式碼範例。首先,我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫:
