腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線(xiàn)工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

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à)，切換之后，推薦的顏色不會(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)求，這樣不方便我們用戶(hù)去理解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>

圖片