vue导航栏制作

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1，在components新建commnn目录，然后再新建nav目录，在此目录下新建nav-bottom.vue文件和nav-item.vue文件

2，nav-bottom.vue中的内容：

<template>
<div>
<div class="nav">
<slot></slot> //插槽
</div>
</div>
</template> <script>
export default {
name: "nav-bottom"
}
</script> <style scoped>
.nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #7b7b7b;
height: 49px;
text-align: center;
}
</style>

3，Nav-item代码：

<template>
<div class="nav-item" :class="{isactive:isactive}">
<div @click="change">
<slot name="font-image"></slot> <--!显示字体图片-->
<slot name="font"></slot> <--!显示文字-->
</div>
</div>
</template><script>
export default {
name: "nav-item",
props: {
path :String // 传递路径
},
computed: {
isactive () {
return this.$route.path.indexOf(this.path) !== -1
}
},
methods: {
change () {
if (this.isactive===false) {
this.$router.push(this.path)
} }
}
}
</script><style scoped>
.nav-item {
flex: 1;
}
.isactive {
color: red;
}
</style>

4，设置导航下的每个字路由页面：

shopping 此目录下创建对应的vue文件

profile 此目录下创建对应的vue文件

homepage 此目录下创建对应的vue文件
classify 此目录下创建对应的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:

<template>
<div class="aaa">
<nav-item path="home" colorstyle="blue">
<span class="iconfont" slot="font-image"></span>
<div slot="font">首页</div>
</nav-item> <nav-item path="classify" colorstyle="green">
<span class="iconfont" slot="font-image"></span>
<div slot="font">分类</div>
</nav-item> <nav-item path="shopping" colorstyle="hotpink">
<span class="iconfont" slot="font-image"></span>
<div slot="font">购物车</div>
</nav-item> <nav-item path="profile">
<span class="iconfont" slot="font-image"></span>
<div slot="font">我的</div>
</nav-item>
</div>
</template> <script>
import navItem from "./nav-item"
export default {
name: "navgative",
components: {
navItem
}
}
</script> <style scoped>
@import "../assets/images/style.css"; @font-face {font-family: 'iconfont';
src: url('../assets/images/fonts/icomoon.eot');
src: url('../assets/images/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../assets/images/fonts/icomoon.woff') format('woff'),
url('../assets/images/fonts/icomoon.ttf') format('truetype'),
url('../assets/images/fonts/icomoon.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
/*vertical-align: middle;*/
}
.aaa {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>

navgation.vue

7，app.vue引入组件：

<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>