欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年04月14日 09:33:21   作者:扭曲的影子  
這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

場景

需求是要求通過點擊用戶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

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

相關(guān)文章

  • vue3解構(gòu)賦值失去響應(yīng)式引發(fā)的問題思考

    vue3解構(gòu)賦值失去響應(yīng)式引發(fā)的問題思考

    這篇文章主要介紹了vue3解構(gòu)賦值失去響應(yīng)式引發(fā)的問題思考,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下
    2022-06-06
  • vue3 獲取元素高度不準(zhǔn)的問題

    vue3 獲取元素高度不準(zhǔn)的問題

    這篇文章主要介紹了vue3 獲取元素高度不準(zhǔn)的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue-cli3在main.js中console.log()會報錯的解決

    vue-cli3在main.js中console.log()會報錯的解決

    這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 圖文詳解vue中proto文件的函數(shù)調(diào)用

    圖文詳解vue中proto文件的函數(shù)調(diào)用

    這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2021-08-08
  • 針對Vue路由history模式下Nginx后臺配置操作

    針對Vue路由history模式下Nginx后臺配置操作

    這篇文章主要介紹了針對Vue路由history模式下Nginx后臺配置操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 使用Vue實現(xiàn)Markdown文檔的展示和解析

    使用Vue實現(xiàn)Markdown文檔的展示和解析

    在Vue項目中,Markdown文檔的使用越來越普遍,因此在Vue中如何進行Markdown文檔展示與解析也成為了一個熱門話題,本文將介紹如何使用Vue實現(xiàn)Markdown文檔的展示和解析,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • 詳解vue.js下引入百度地圖jsApi的兩種方法

    詳解vue.js下引入百度地圖jsApi的兩種方法

    這篇文章主要介紹了詳解vue.js下引入百度地圖jsApi的兩種方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue 項目全屏插件screenfull使用案例

    vue 項目全屏插件screenfull使用案例

    這篇文章主要介紹了vue 項目全屏插件screenfull使用案例,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-12-12
  • Vue實現(xiàn)向PDF文件中添加二維碼

    Vue實現(xiàn)向PDF文件中添加二維碼

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)向PDF文件中添加二維碼的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
    2023-06-06
  • vue.js2.0點擊獲取自己的屬性和jquery方法

    vue.js2.0點擊獲取自己的屬性和jquery方法

    下面小編就為大家分享一篇vue.js2.0點擊獲取自己的屬性和jquery方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論