快捷導(dǎo)航

vue?router如何實(shí)現(xiàn)tab切換

更新時(shí)間：2022年04月26日 09:34:46 作者：半獸先生

這篇文章主要介紹了vue?router如何實(shí)現(xiàn)tab切換，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

router實(shí)現(xiàn)tab切換

實(shí)現(xiàn)的效果：path路徑發(fā)生改變，tab切換的顏色也會(huì)到相對(duì)應(yīng)的地方，并且進(jìn)首頁(yè)，默認(rèn)推薦為選中狀態(tài)。

首先需要給<router-link>中直接添加active-class屬性，然后在樣式中設(shè)置自定義類(lèi)名activeee的樣式。

<li><router-link to="/" active-class="activeee" exact>推薦</router-link></li>
<li><router-link to="/crazy" active-class="activeee">瘋狂折扣</router-link></li>
<li><router-link to="/fast" active-class="activeee">好物秒殺</router-link></li>
<li><router-link to="/ole" active-class="activeee">大牌精選</router-link></li>
<li><router-link to="/woman" active-class="activeee">女裝</router-link></li>

.activeee {
  color: #f10180 !important;
  font-weight: 700;
}

注意：需要給默認(rèn)首頁(yè)的router-link里邊添加exact屬性，不添加的話，切換之后，推薦的顏色不會(huì)消失

router類(lèi)似tab切換的使用

這次我們來(lái)聊聊vue router的切換如何實(shí)現(xiàn)

1.首先我們需要在上一次創(chuàng)建好的項(xiàng)目中新建幾個(gè)待切換的.vue文件

2.然后我們需要在router.js里面添加代碼

// 組件
import Text1 from './components/Text1'
import Text2 from './components/Text2'
import Text3 from './components/Text3'

3.同在router.js里面的下面我們需要在當(dāng)前顯示的頁(yè)面的路由中添加代碼

此時(shí)就會(huì)實(shí)現(xiàn)切換，并且把Text1作為首選頁(yè)

// Vue中使用children實(shí)現(xiàn)路由的嵌套
          // 使用 children 屬性，實(shí)現(xiàn)子路由，同時(shí)，子路由的 path 前面，不要帶 / ，
          // 否則永遠(yuǎn)以根路徑開(kāi)始請(qǐng)求，這樣不方便我們用戶去理解URL地址
          children:[
            {
                path:'/',        //如果只寫(xiě) / 則說(shuō)明默認(rèn)打開(kāi)一個(gè)頁(yè)面
                redirect:'text1'//默認(rèn)指向頁(yè)面
            },
            {
              path: 'text1',
              component: Text1,
            },
            {
              path: 'text2',
              component: Text2,
            },
            {
              path: 'text3',
              component: Text3,
            }
          ]

如圖：

4.這是我們還需要在存放切換功能頁(yè)面也就是在未添加切換時(shí)顯示的頁(yè)面中添加代碼：

	  <router-link to="/home/text1">
        <span>text1</span>
      </router-link> 
      <router-link to="/home/text2">
        <span>text2</span>
      </router-link> 
      <router-link to="/home/text3">
        <span>text3</span>
      </router-link> 
      <router-view></router-view>

圖片

運(yùn)行效果如圖：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue el-table 默認(rèn)展開(kāi)某一行的實(shí)例
這篇文章主要介紹了Vue el-table 默認(rèn)展開(kāi)某一行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue獲取子組件實(shí)例對(duì)象ref屬性的方法推薦
在Vue中我們可以使用ref屬性來(lái)獲取子組件的實(shí)例對(duì)象,這個(gè)功能非常方便,這篇文章主要給大家介紹了關(guān)于Vue獲取子組件實(shí)例對(duì)象ref屬性的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
Vue+Vant實(shí)現(xiàn)頂部搜索欄
這篇文章主要為大家詳細(xì)介紹了Vue+Vant實(shí)現(xiàn)頂部搜索欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Element UI框架中巧用樹(shù)選擇器的實(shí)現(xiàn)
這篇文章主要介紹了Element UI框架中巧用樹(shù)選擇器的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue淺拷貝和深拷貝實(shí)現(xiàn)方案
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實(shí)現(xiàn)方案及區(qū)別對(duì)比分析,需要的朋友可以參考下
2023-03-03
vue組件以及父子組件通信方式
這篇文章主要介紹了Vue組件化的基本概念,包括什么是組件化、Vue的組件化思想以及如何在Vue中注冊(cè)和使用組件,文章還詳細(xì)講解了如何進(jìn)行父子組件之間的通信,包括父組件傳遞數(shù)據(jù)給子組件和子組件通過(guò)自定義事件將數(shù)據(jù)傳遞給父組件,文章最后通過(guò)一個(gè)綜合練習(xí)來(lái)鞏固所學(xué)知識(shí)
2025-02-02
vue-cli設(shè)置publicPath小記
這篇文章主要介紹了vue-cli設(shè)置publicPath小記，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
使用mockjs如何生成隨機(jī)數(shù)據(jù)
Mockjs是一個(gè)用于生成隨機(jī)數(shù)據(jù)和攔截Ajax請(qǐng)求的庫(kù),可以與Vue和Axios結(jié)合使用,提高前端開(kāi)發(fā)效率,通過(guò)在項(xiàng)目中引入Mock.js文件,可以模擬后端API,攔截Ajax請(qǐng)求并返回自定義響應(yīng),這種方法適用于在后端尚未開(kāi)發(fā)完成時(shí)的前端開(kāi)發(fā)測(cè)試
2024-10-10
vue v-for 使用問(wèn)題整理小結(jié)
使用v-for指令的時(shí)候遇到一個(gè)錯(cuò)誤問(wèn)題，具體錯(cuò)誤代碼在文章給大家列出，對(duì)vue v-for使用問(wèn)題感興趣的朋友跟隨小編一起學(xué)習(xí)吧
2019-08-08
vue中v-model如何綁定多循環(huán)表達(dá)式實(shí)戰(zhàn)案例
v-model綁定的變量無(wú)論是對(duì)象還是數(shù)組都是綁定的value值,下面這篇文章主要給大家介紹了關(guān)于vue中v-model如何綁定多循環(huán)表達(dá)式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11