1, 구성 요소 commnn 새로운 디렉토리는 다음의 파일 및 항법 bottom.vue 파일 탐색 - item.vue를 생성, 디렉토리를 디렉토리를 생성 NAV
2, 항법 bottom.vue 내용 :
1 < 템플릿 >
2 < DIV >
3 < DIV 클래스 = "탐색" >
4 < 슬롯 > </ 슬롯 > //插槽
5 </ DIV >
6 </ DIV >
7 </ 서식 >
(8)
(9) < 스크립트 >
10 수출 기본 {
11 이름 : " 탐색 바닥 "
12 }
13 </ 스크립트 >
(14)
15 < 스타일 범위 >
16 .nav {
17 표시 : 플렉스 ;
18 위치 : 고정 ;
19 하단 : 0 ;
도 20은 왼쪽 : 0 ;
21 오른쪽 : 0 ;
(22) 배경 색상 : # 7b7b7b ;
23 높이 : 1600 픽셀 ;
24 텍스트 정렬 : 센터 ;
25 }
26 </ 스타일 >
3 탐색 항목 코드 :
< 템플릿 >
< DIV 클래스 = "탐색 항목" : 클래스 = "{이 isActive :이 isActive}" >
< DIV @click = "변화" >
< 슬롯 이름 = "글꼴 - 이미지" > </ 슬롯 > <! -显示字体图片->
< 슬롯 이름 = "글꼴" > </ 슬롯 > <! -显示文字->
</ DIV >
</ DIV >
</ 템플릿 >
< 스크립트 >
수출 기본 {
이름 : " 탐색 항목" ,
소품 : {
경로 : 문자열 //传递路径
},
계산 : {
이 isActive () {
반환 이 $ route.path.indexOf (. 이 .path를) ==! - 1
}
}
방법 : {
변화를 () {
경우 ( 이 .isactive === 거짓 ) {
이 . $의 router.push ( 이 .path)
}
}
}
}
</ 스크립트 >
< 스타일 스코프 >
.nav 항목{
플렉스 : 1 ;
}
.isactive {
색상 : 빨강 ;
}
</ 스타일 >
4, 탐색 경로 페이지에서 각 단어를 설정 :
뷰는이 디렉토리 쇼핑의 파일을 해당 만들
뷰는 디렉토리 프로필에있는 파일을 해당 만들
홈페이지 VUE 파일에서 해당 디렉토리를 생성하는
이 디렉토리 분류 해당 VUE 파일을 만듭니다
5, 라우팅 설정 :
import Router from 'vue-router'
import Vue from 'vue'
const home = () => import('../components/homepage/Home_msg')
const classify = () => import('../components/classify/Classify')
const shopping = () => import('../components/shopping/Shopping')
const profile = () => import('../components/profile/Profile')
Vue.use(Router)
const routes = [
{
path: '',
redirect: '/home'
},
{
path:'/profile',
component: profile
},
{
path:'/classify',
component: classify
},
{
path:'/shopping',
component: shopping
},
{
path:'/home',
component: home
}
]
const router = new Router({
routes,
mode: 'history'
});
export default router
6,抽离组件新建navgation.vue:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <template> 2 <div class="aaa"> 3 <nav-item path="home" colorstyle="blue"> 4 <span class="iconfont" slot="font-image"></span> 5 <div slot="font">首页</div> 6 </nav-item> 7 8 <nav-item path="classify" colorstyle="green"> 9 <span class="iconfont" slot="font-image"></span> 10 <div slot="font">分类</div> 11 </nav-item> 12 13 <nav-item path="shopping" colorstyle="hotpink"> 14 <span class="iconfont" slot="font-image"></span> 15 <div slot="font">购物车</div> 16 </nav-item> 17 18 <nav-item path="profile"> 19 <span class="iconfont" slot="font-image"></span> 20 <div slot="font">我的</div> 21 </nav-item> 22 </div> 23 </template> 24 25 <script> 26 import navItem from "./nav-item" 27 export default { 28 name: "navgative", 29 components: { 30 navItem 31 } 32 } 33 </script> 34 35 <style scoped> 36 @import "../assets/images/style.css"; 37 38 @font-face {font-family: 'iconfont'; 39 src: url('../assets/images/fonts/icomoon.eot'); 40 src: url('../assets/images/fonts/icomoon.eot?#iefix') format('embedded-opentype'), 41 url('../assets/images/fonts/icomoon.woff') format('woff'), 42 url('../assets/images/fonts/icomoon.ttf') format('truetype'), 43 url('../assets/images/fonts/icomoon.svg#iconfont') format('svg'); 44 } 45 .iconfont{ 46 font-family:"iconfont" !important; 47 font-size:16px;font-style:normal; 48 -webkit-font-smoothing: antialiased; 49 -webkit-text-stroke-width: 0.2px; 50 -moz-osx-font-smoothing: grayscale; 51 /*vertical-align: middle;*/ 52 } 53 .aaa { 54 display: flex; 55 position: fixed; 56 bottom: 0; 57 left: 0; 58 right: 0; 59 } 60 </style>
7,app.vue引入组件:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div id="app"> <router-view></router-view> <navBottom> <navgative></navgative> </navBottom> </div> </template> <script> import navBottom from './components/nav-bottom' import navgative from './components/navgative' export default { name: 'app', components: { navBottom, navgative } } </script> <style> </style>
8,npm run serve 运行