快捷導(dǎo)航

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

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

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

場(chǎng)景

需求是要求通過(guò)點(diǎn)擊用戶(hù)ID或者昵稱(chēng) 跳轉(zhuǎn)用戶(hù)管理頁(yè)面并查詢(xún)?cè)撚脩?hù)

實(shí)現(xiàn)效果如圖

實(shí)現(xiàn)方法開(kāi)始

在A頁(yè)面也就是筆記列表頁(yè)簽為父級(jí) 代碼如下

<el-table v-loading="loading" :data="manageUserNoteList" @selection-change="handleSelectionChange">
 
<el-table-column label="用戶(hù)ID" align="center" prop="userId">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查找該用戶(hù)" 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>

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

// 字符串
<router-link to="apple"> to apple</router-link>
// 對(duì)象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由帶查詢(xún)參數(shù)query，地址欄變成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由帶查詢(xún)參數(shù)query，地址欄變成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由帶路由參數(shù)params，params 不生效，如果提供了 path，params 會(huì)被忽略
<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>

方法比較多這里我使用了

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

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

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

接收方法如下

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

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

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

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

您可能感興趣的文章: