vue router 고양이 아래쪽 탐색 표시 줄 기능 모방

먼저 고양이 의 네 비게 이 션 을 붙 여 라.그 안에 정선,브랜드,회원,카 트,나의 다섯 개의 네 비게 이 션 과 대응 하 는 아이콘 이 포함 되 어 있다.

분석:
1.아이콘 가 져 오기
알 리 바 바 벡터 아이콘 라 이브 러 리,인터넷 주소  http://www.iconfont.cn 。
공식 아이콘 라 이브 러 리 를 클릭 하고 고양이 아이콘 라 이브 러 리 를 선택 하여 카 트 에 넣 습 니 다.

항목 에 추가 하려 면 새 항목 만 들 기 단 추 를 누 르 고 tianmao 프로젝트 를 만 들 고 확인 을 누 르 십시오.

이 때 온라인 링크 를 보 거나 로 컬 로 다운로드 하 는 두 가지 방식 이 있 습 니 다.저 는 첫 번 째 방법 을 선택 하 겠 습 니 다.나중에 작은 아이콘 을 추가 하려 면 온라인 링크 를 다시 만 들 고 링크 를 업데이트 하면 되 기 때 문 입 니 다.


index.html 에 연 결 된 링크 탭 을 복사 합 니 다.구체 적 으로 는

<link rel="stylesheet" href="http://at.alicdn.com/t/font_443540_nvmeyfe7k3rcc8fr.css" rel="external nofollow" >

아이콘 을 도입 합 니 다.<i class="icon iconfont icon-wo"></i>세 번 째 클 라 스 와 구별 하여 해당 아이콘 을 도입 합 니 다.
이 때 필요 한 아이콘 처리 완료
2,창설 정선,브랜드,회원,쇼핑 카 트,나 및 루트 네 비게 이 션 구성 요소 Home.vue,Brand.vue,Member.vue,Cart.vue,Me.vue,Tabs.vue
사용 하 는 스타일 일 때 less.vue 파일 에 스타일 을 쓰 려 면 style 은로 써 야 합 니 다.그렇지 않 으 면 오류 가 발생 합 니 다.
Tabs.vue

<template> 
 <div class="tabs"> 
  <!--    --> 
  <ul> 
   <!--this inspection reports XML/HTML tags with missing mandatory attrbutes ,you can specify attrbute name that should not be reported--> 
   <!--home    ，        ，            ， router-link   exact  --> 
   <router-link :to="{name:'Home'}" tag="li" exact> 
    <div> 
     <i class="icon iconfont icon-31shouye"></i> 
    </div> 
    <div>  </div> 
   </router-link> 
   <router-link :to="{name:'Brand'}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-zhubaoshipin"></i> 
    </div> 
    <div>  </div> 
   </router-link> 
   <router-link :to="{name:'Member'}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-huiyuanqia"></i> 
    </div> 
    <div>  </div> 
   </router-link> 
   <router-link :to="{name:'Cart'}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-gouwucheman"></i> 
    </div> 
    <div>   </div> 
   </router-link> 
   <router-link :to="{name:'Me',params:{user:'xu'}}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-wo"></i> 
    </div> 
    <div> </div> 
   </router-link> 
  </ul> 
 </div> 
</template> 
<script type="text/ecmascript-6"> 
 export default {} 
</script> 
<style lang="less" type="text/less"> 
 .tabs { 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  background-color: #fff; 
  box-shadow: 0 2px 4px #000; 
  width: 100%; 
  & > ul, & > ul > li { 
   margin: 0; 
   padding: 0; 
  } 
  ul { 
   display: table; 
   width: 100%; 
   & > li { 
    text-align: center; 
    font-size: 16px; 
    display: table-cell; 
    padding: 8px 12px; 
    cursor: pointer; 
    &.router-link-active{ 
     color: #D0021B; 
    } 
    & > div { 
     font-size: 14px; 
     & > i { 
      font-size: 30px; 
     } 
    } 
   } 
  } 
 } 
</style> 

내 가 사용 하 는 것 은 경로 이름 입 니 다.그러면 우 리 는 경로 가 구성 요소 로 변 할 때 router/index.js 파일 을 직접 수정 하면 됩 니 다.
3.경로 만 들 기
router/index.js

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from '@/Home' 
import Brand from '@/Brand' 
import Member from '@/Member' 
import Cart from '@/Cart' 
import Me from '@/Me' 
Vue.use(Router) 
export default new Router({ 
 //mode: 'history', 
 //base: __dirname, 
 //linkActiveClass: 'active', //        Class  
 routes: [ 
  { 
   path: '/', 
   name: 'Home', 
   component: Home 
  }, 
  { 
   path: '/brand', 
   name: 'Brand', 
   component: Brand 
  }, 
  { 
   path: '/member', 
   name: 'Member', 
   component: Member 
  }, 
  { 
   path: '/cart', 
   name: 'Cart', 
   component: Cart 
  }, 
  { 
   path: '/me', 
   name: 'Me', 
   component: Me 
  } 
 ] 
}) 

4.App.vue 는 구성 요소 Tabs.vue 를 도입 하고렌 더 링 경로 와 일치 하 는 보기 구성 요 소 를 추가 합 니 다.

<template> 
 <div id="app"> 
  <Tabs></Tabs> 
  <div class="content"> 
   <router-view></router-view> 
  </div> 
 </div> 
</template> 
<script> 
 import Tabs from "./Tabs.vue" 
 export default { 
  name: 'app', 
  data(){ 
   return {} 
  }, 
  components: {Tabs} 
 } 
</script> 
<style> 
 *{ 
  padding:0; 
  margin:0; 
 } 
 #app { 
  font-family: 'Avenir', Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
 } 
</style> 

5.내 비게 이 션 상태 스타일
에 대응 하 는 경로 가 일치 하면 class 속성 값 을 router-link-exact-active router-link-active 로 자동 으로 설정 합 니 다.
router-link-exact-active:링크 가 정확하게 일치 할 때 활성화 해 야 할 CSS 클래스 를 설정 합 니 다.
router-link-active:링크 활성화 에 사용 할 CSS 클래스 를 설정 합 니 다.
CSS 스타일 이름 을 변경 하려 면속성 exact-active-class 와 active-class 를 통 해 각각 설정 할 수 있 으 며,경로 구조 함수 옵션 linkExactActiveClass 와 linkActiveClass 를 통 해 설정 할 수 있 습 니 다.

브랜드 를 클릭 할 때 다음 과 같이 보 여 줍 니 다.Home 의 Tab 은 route-link-activeCSS 클래스 이름 을 설정 하고 있 습 니 다.route-link-active 스타일 색상 을 빨간색 으로 설정 하면 빨간색 을 계속 유지 합 니 다.
이 때"정확 한 일치 모드"를 사용 해 야 합 니 다.는 exact 를 사용 합 니 다.이 때 Home 의 Tab 는 routt-link-activeCSS 클래스 이름 을 설정 하지 않 습 니 다.
방문http://localhost:8080/#/brand 일치 하지 않 습 니 다http://localhost:8080/#/

총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue router 가 티몰 밑 에 있 는 네 비게 이 션 바 기능 을 모방 하여 여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!