普歌-碼上鴻鹄團隊:(tab欄)nuxt+element實作路由傳參控制tab欄

普歌-碼上鴻鹄團隊：Vue中用ele UI的tabs欄實作由路由參數控制

1. 實作思路(vue+nuxt+eleui)

1) 第一步用連結先傳遞參數，去到tabs欄的頁面接收參數

2) 第二步用watch監聽參數的變化 ,這就是基本思路

2. 實作步驟

• 先解釋一下handler方法和immediate屬性,這個是watch方法中的.

<script>
export default {
//  讓值最初時候watch就執行就用到了handler和immediate屬性
watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth裡聲明了firstName這個方法之後立即先去執行handler方法，如果設定了false，那麼效果就是在當頁面發生改變才執行
    immediate: true
  }
}
};
</script>
           

1. 第一步,先用

   nuxt-link

   傳遞參數,我用的是動态參數

   query

   ;也可以用

   params

<ul>
   <li>
   <!-- query參數 -->
     <nuxt-link :to="{ name: 'dynamic', query: { active: 'news' }}">新聞熱點</nuxt-link>
   </li>
   <li>
     <nuxt-link :to="{ name: 'dynamic', query: { active: 'puge' }}">普歌熱搜</nuxt-link>
   </li>
</ul>
           

這是點選後攜帶參數跳到了相應的參數

1. 第二步,複制element ui元件tabs,我們選用最基本的結構(附上直通車:element Tabs)

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="使用者管理" name="first">使用者管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
      //這個控制哪個被選中,預設選中name值為first的
        activeName: 'first'
      };
    },
  };
</script>
           

1. 第三步,通過watch監視路由,進行判斷,根據路由參數改變

   activeName

   的值

<script>
export default {
   data() {
      return {
      //這個控制哪個被選中,預設選中name值為first的
        activeName: 'first'
      };
    },
  watch: {
    $route: {
      handler: function (route) {
      //用route取到參數
      //有需要的夥伴可以列印route,看看需要拿到什麼樣的參數
        if (route.query.active == "news") {
          this.activeName = "first";
        } else if (route.query.active == "puge") {
          this.activeName = "second";
        } 
      },
      immediate: true,
    },
};
</script>
           

最後看看完整的步驟

看看最終效果

技術源于追求

追求源于熱愛

極緻源于夢想

更多推薦：wantLG的《普歌-碼上鴻鹄團隊:前端項目控制台(F12)列印出帶樣式的文字、圖檔(像百度一下一樣)》

• 作者：wantLG
• 本文源自：wantLG的《普歌-碼上鴻鹄團隊：Vue中用ele UI的tabs欄實作由路由參數控制》
• 本文版權歸作者和CSDN共有，歡迎轉載，且在文章頁面明顯位置給出原文連結，未經作者同意必須保留此段聲明，否則保留追究法律責任的權利。