vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程

更新時間：2023年04月14日 09:33:21 作者：扭曲的影子

這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

場景

需求是要求通過點擊用戶ID或者昵稱跳轉(zhuǎn)用戶管理頁面并查詢該用戶

實現(xiàn)效果如圖

實現(xiàn)方法開始

在A頁面也就是筆記列表頁簽為父級代碼如下

<el-table v-loading="loading" :data="manageUserNoteList" @selection-change="handleSelectionChange">
 
<el-table-column label="用戶ID" align="center" prop="userId">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查找該用戶" placement="top-start">
               <router-link style="color: #00aaff;" :to="{name: 'User', params: { userId: scope.row.userId }}">{{scope.row.userId}}</router-link>
           </el-tooltip>
          <!-- <el-link type="primary" :to="{name: 'User', params: { userId: scope.row.userId }}" >{{scope.row.userId}}</el-link> -->
        </template>
</el-table-column>
</el-table>

多場景vue跳轉(zhuǎn)方法

// 字符串
<router-link to="apple"> to apple</router-link>
// 對象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由帶查詢參數(shù)query，地址欄變成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由帶查詢參數(shù)query，地址欄變成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由帶路由參數(shù)params，params 不生效，如果提供了 path，params 會被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由帶路由參數(shù)params，地址欄是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
// 其他方式
<router-link :to="'/system/user/' + scope.row.userId" class="link-type">
  <span>{{ scope.row.userId }}</span>
</router-link>

方法比較多這里我使用了

動態(tài)賦值<router-link :to="...">動態(tài)傳參，to里的值可以是一個字符串路徑，或者一個描述地址的對象

// 命名路由帶路由參數(shù)params，地址欄是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

給不知道name參數(shù)從哪來的提個醒這個name里的參數(shù)的子級頁面的name 也就是你需要跳轉(zhuǎn)的那個頁面也就是路由跳轉(zhuǎn)

接收方法如下

export default {
  name: "User",
  components: { Treeselect },
  data() {
  return {}
 created() {
  //每次切換頁面重新進入次方法 此方法只用于頁面?zhèn)鲄⒏鶕?jù)userid查詢用戶
  activated () {undefined
      const userId = this.$route.params && this.$route.params.userId;
        //userid是否為空
      if (userId) {
            this.loading = true;
            //賦予userid queryParams查詢傳入查詢的字段  this.$route.params.userId接收的字段參數(shù)
            this.queryParams.userId = this.$route.params.userId;
            //我自己的搜索方法
            this.handleQuery();
        }
  },
  methods: {
}
}

獲取參數(shù)方式：this.$route.params.userId

這個userId就是{name: 'User', params: { userId: scope.row.userId }} 里params下的userId

到此這篇關于vue如何跳轉(zhuǎn)頁簽傳參并查詢參數(shù)（保姆級）的文章就介紹到這了,更多相關vue跳轉(zhuǎn)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vuejs第十三篇之組件——雜項
組件（Component）是 Vue.js 最強大的功能之一。本文重點給大家介紹vuejs組件相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-09-09
Vue實現(xiàn)錄制屏幕并本地保存功能
這篇文章主要介紹了Vue實現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā)，結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-04-04
Vue升級帶來的elementui沖突警告：Invalid prop: custom va
在頁面渲染的時候,控制臺彈出大量警告,嚴重影響控制臺的信息獲取功能,但是頁面基本能正常顯示,這是因為Vue升級帶來的elementui沖突警告： Invalid prop: custom validator check failed for prop “type“.的解決方案,本文給大家介紹了詳細的解決方案
2025-04-04
vue3中7種路由守衛(wèi)的使用大全舉例
最近在學習vue,感覺路由守衛(wèi)這個地方知識點挺多的,而且很重要,下面這篇文章主要給大家介紹了關于vue3中7種路由守衛(wèi)的使用大全,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03
vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF
這篇文章主要為大家詳細介紹了vue如何使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學習一下
2023-08-08
Vue3新特性Suspense和Teleport應用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實現(xiàn)動態(tài)加載,同時,Teleport技術展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧
2024-07-07
Vue 頁面監(jiān)聽用戶預覽時間功能的實現(xiàn)代碼
這篇文章主要介紹了Vue 頁面如何監(jiān)聽用戶預覽時間,首先需要借助vue頁面的生命周期函數(shù)mounted和destroyed，分別加入開始計時和清除計時的邏輯，通過相關操作實現(xiàn)此功能，需要的朋友可以參考下
2021-07-07
Vue3實現(xiàn)雙向綁定的基本原理和代碼示例解析
Vue3中的響應式系統(tǒng)由Proxy實現(xiàn),它取代了Vue2中的Object.defineProperty,提供了更強大的功能和更好的性能,下面給大家介紹Vue3實現(xiàn)雙向綁定的基本原理和代碼示例解析,感興趣的朋友一起看看吧
2024-12-12
安裝多版本Vue-CLI的實現(xiàn)方法
這篇文章主要介紹了安裝多版本Vue-CLI的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
Vue加載中動畫組件使用方法詳解
這篇文章主要為大家詳細介紹了Vue加載中動畫組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03