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>

app.vue

8，npm run serve 运行

巴特西

vue导航栏制作

最新文章

热门文章