快捷導(dǎo)航

vue路由跳轉(zhuǎn)傳參數(shù)的方法

更新時(shí)間：2019年05月06日 15:50:11 作者：帥阿星

這篇文章主要介紹了vue路由跳轉(zhuǎn)傳參數(shù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

vue中路由跳轉(zhuǎn)傳參數(shù)有多種,自己常用的是下面的幾種

通過(guò)router-link進(jìn)行跳轉(zhuǎn)
通過(guò)編程導(dǎo)航進(jìn)行路由跳轉(zhuǎn)

1. router-link

<router-link 
 :to="{
  path: 'yourPath', 
  params: { 
   name: 'name', 
   dataObj: data
  },
  query: {
   name: 'name', 
   dataObj: data
  }
 }">
</router-link>

 1. path -> 是要跳轉(zhuǎn)的路由路徑,也可以是路由文件里面配置的 name 值,兩者都可以進(jìn)行路由導(dǎo)航
 2. params -> 是要傳送的參數(shù),參數(shù)可以直接key:value形式傳遞
 3. query -> 是通過(guò) url 來(lái)傳遞參數(shù)的同樣是key:value形式傳遞

 // 2,3兩點(diǎn)皆可傳遞

2. $router方式跳轉(zhuǎn)

// 組件 a
<template>
 <button @click="sendParams">傳遞</button>
</template>
<script>
 export default {
 name: '',
 data () {
  return {
  msg: 'test message'
  }
 },
 methods: {
  sendParams () {
  this.$router.push({
   path: 'yourPath', 
   name: '要跳轉(zhuǎn)的路徑的 name,在 router 文件夾下的 index.js 文件內(nèi)找',
   params: { 
    name: 'name', 
    dataObj: this.msg
   }
   /*query: {
    name: 'name', 
    dataObj: this.msg
   }*/
  })
  }
 },
 computed: {

 },
 mounted () {

 }
 }
</script>
<style scoped></style>
----------------------------------------
// 組件b
<template>
 <h3>msg</h3>
</template>
<script>
 export default {
 name: '',
 data () {
  return {
  msg: ''
  }
 },
 methods: {
  getParams () {
  // 取到路由帶過(guò)來(lái)的參數(shù) 
  let routerParams = this.$route.params.dataobj
  // 將數(shù)據(jù)放在當(dāng)前組件的數(shù)據(jù)內(nèi)
  this.msg = routerParams
  }
 },
 watch: {
 // 監(jiān)測(cè)路由變化,只要變化了就調(diào)用獲取路由參數(shù)方法將數(shù)據(jù)存儲(chǔ)本組件即可
  '$route': 'getParams'
 }
 }
</script>
<style scoped></style>

這次項(xiàng)目就遇到了這些問(wèn)題, 希望能幫助到大家!

以上所述是小編給大家介紹的vue路由跳轉(zhuǎn)傳參數(shù)的方法詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue3 使用socket的完整代碼
這篇文章主要介紹了vue3 使用socket的完整代碼,包括vue3客戶端和服務(wù)端的實(shí)例講解,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-03-03
Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值
本文主要介紹了Vue結(jié)合leaflet實(shí)現(xiàn)克里金插值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
vue中的計(jì)算屬性傳參
這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue通過(guò)vue-router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的全過(guò)程
這篇文章主要介紹了Vue通過(guò)vue-router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的操作步驟,文中有詳細(xì)的代碼示例和圖文供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下
2024-04-04
vue+axios全局添加請(qǐng)求頭和參數(shù)操作
這篇文章主要介紹了vue+axios全局添加請(qǐng)求頭和參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
在Vue3中創(chuàng)建和使用自定義指令的實(shí)現(xiàn)方式
在現(xiàn)代前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,它提供了許多強(qiáng)大的功能來(lái)幫助開發(fā)者構(gòu)建高效的用戶界面,自定義指令是 Vue.js 的一個(gè)重要特性,它允許開發(fā)者擴(kuò)展 HTML 元素的功能,本文將詳細(xì)介紹如何在 Vue3 中創(chuàng)建和使用自定義指令,并提供示例代碼來(lái)幫助理解
2024-12-12
vue里面如何使用圖片的懶加載
這篇文章主要介紹了vue里面如何使用圖片的懶加載，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue路由相對(duì)路徑跳轉(zhuǎn)方式
這篇文章主要介紹了vue路由相對(duì)路徑跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-08-08
Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說(shuō)明
Vue?Router是Vue.js官方的路由管理器,它允許我們通過(guò)定義路由來(lái)管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式：<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法
2025-01-01
Vue刷新后頁(yè)面數(shù)據(jù)丟失問(wèn)題的解決過(guò)程
在做vue項(xiàng)目的過(guò)程中有時(shí)候會(huì)遇到一個(gè)問(wèn)題,就是進(jìn)行F5頁(yè)面刷新的時(shí)候,頁(yè)面的數(shù)據(jù)會(huì)丟失,這篇文章主要給大家介紹了關(guān)于Vue刷新后頁(yè)面數(shù)據(jù)丟失問(wèn)題的解決過(guò)程,需要的朋友可以參考下
2022-11-11