国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

如何對vue傳參與router使用

來源:懂視網 責編:小采 時間:2020-11-27 19:45:10
文檔

如何對vue傳參與router使用

如何對vue傳參與router使用:這次給大家帶來如何對vue傳參與router使用,對vue傳參與router使用的注意事項有哪些,下面就是實戰案例,一起來看一下。vue傳參方法一1,路由配置 { path: '/describe/:id', name: 'Describe', component: D
推薦度:
導讀如何對vue傳參與router使用:這次給大家帶來如何對vue傳參與router使用,對vue傳參與router使用的注意事項有哪些,下面就是實戰案例,一起來看一下。vue傳參方法一1,路由配置 { path: '/describe/:id', name: 'Describe', component: D

這次給大家帶來如何對vue傳參與router使用,對vue傳參與router使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

vue傳參方法一

1,路由配置

 {
 path: '/describe/:id',
 name: 'Describe',
 component: Describe
 }

2,使用方法

// 直接調用$router.push 實現攜帶參數的跳轉
 this.$router.push({
// 這個id是一個變量,隨便是什么值都可以
 path: /describe/${id}`,
 })

3,獲取方法(在describe頁面)

$route.params.id

使用以上方法可以拿到上個頁面傳過來的id值

vue傳參方法二

1,路由配置

 {
 path: '/describe',
 name: 'Describe',
 component: Describe
 }
(這個地方默認配置就可以了,不用做任何的處理)

2,使用方法

 this.$router.push({
 name: 'Describe',
 params: {
 id: id
 }
 })

父組件中:通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數。

3,獲取方法(在describe頁面)

$route.params.id

也用params獲取就可以了;

vue傳參方法三

1,路由配置

 {
 path: '/describe',
 name: 'Describe',
 component: Describe
 }

(默認配置)

2,使用方法

 this.$router.push({
 path: '/describe',
 query: {
 id: id
 }
 })
(params換成了query)

3,獲取方法(在describe頁面)

$route.query.id

(這個地方用query還獲取id,和前面用的params獲取的區別在于,用query獲取的id值會在url中有顯示,可以看到你傳過來的值)

props傳值方法

父組件

(table-data這個地方可以隨便取名字,不是特定的值)

<p class="content">
//這個是一個普通組件,其中tabelData可以是變量,也可以是常量,和pageInfo一樣樣,這里打算傳遞兩個值過去,其實也可以用對象的方式傳過去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

子組件

props: ['tableData', 'pageInfo'],
data() {
 return {
 tData: this.tableData,
 page: this.pageInfo
 }
}

prop是單向綁定的,不應該在子組件內部改變prop。不過這里的props傳過來的值會隨之父組件的值的改變而改變,是動態改變的。

$route使用小技巧

1,$route.path

類型: string

字符串,對應當前路由的路徑,總是解析為絕對路徑,如 "/foo/bar"。

2,$route.params

類型: Object

  一個 key/value 對象,包含了動態片段和全匹配片段,如果沒有路由參數,就是一個空對象。

3,$route.query

類型: Object

一個 key/value 對象,表示 URL 查詢參數。例如,對于路徑 /foo?user=1,則有 $route.query.user == 1,如果沒有查詢參數,則是個空對象。

4,$route.hash

類型: string

當前路由的 hash 值 (帶 #) ,如果沒有 hash 值,則為空字符串。

5,$route.fullPath

類型: string

完成解析后的 URL,包含查詢參數和 hash 的完整路徑。

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

怎樣快速解決jQuery發請求傳輸中文參數亂碼

如何利用PHP實現防止表單重復提交

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

如何對vue傳參與router使用

如何對vue傳參與router使用:這次給大家帶來如何對vue傳參與router使用,對vue傳參與router使用的注意事項有哪些,下面就是實戰案例,一起來看一下。vue傳參方法一1,路由配置 { path: '/describe/:id', name: 'Describe', component: D
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产精品激情综合久久 | 国产一区二区三区高清 | 息子五十路 | 亚洲天堂黄色 | 午夜视频久久久久一区 | 欧美日韩视频一区二区三区 | 一级毛片一级毛片一级毛片 | 爱啪网亚洲第一福利网站 | 国产精品区一区二区三 | 亚洲欧美国产精品 | 图片专区亚洲 欧美 另类 | 欧美aⅴ在线 | 欧美一区二区三区四区视频 | 久久综合精品国产一区二区三区无 | 国产成人久久综合二区 | 欧美国产精品 | 久久综合中文字幕一区二区 | 欧美亚洲另类视频 | 欧美日韩精品一区二区三区视频在线 | 亚洲区中文字幕 | 欧美成人h精品网站 | 免费看成人国产一区二区三区 | 国产一级久久久久久毛片 | 国产精品视频大全 | 国产播放器一区 | 国产精品久久久 | 高清国产在线 | 国产伦精品一区二区三区高清 | 国产1页| 二区视频 | 精品在线免费观看 | 亚洲欧美在线综合 | 日韩一区二区三区在线播放 | 亚洲伊人精品 | 免费观看国产精品 | 亚洲日韩图片专区第1页 | 最新国产视频 | 国产视频资源在线观看 | 国产欧美日韩三级 | 殴美aⅴ| 精品视频免费看 |