Vue 小案例 导航路由跳转页面

功能展示：

 

需求：

1.点击底部导航，跳转至当前页面，

2.点击当前标题，当前标题为红色，其他标题为灰色

 

结构：

Home为 导航首页

Star为 星星有礼

ProductList为 今日必抢

routers.vue为底部导航组件

routers.vue底部导航所有代码：

tag是路径 ；

active-class做样式的切换；

<template>
    <div class="Router-view">
      <router-link :to="{path:i.tag}" active-class="active" v-for="(i,index) in routerview" :key="index"
      tag="a">
        <i :class="i.icon"></i>
        <span>{{i.routers}}</span>
      </router-link>
    </div>
</template>

<script>
    export default {
        name: "Routerview",
        data(){
          return{
            routerview:[
              {
                icon:"iconfont icon-shouye",
                routers:"首页",
                tag:"Indexhome"
              },
              {
                icon:"iconfont icon-xingxing",
                routers:"星星有礼",
                tag:"Stars"
              },
              {
                icon:"iconfont icon-xianshiqianggou",
                routers:"今日必抢",
                tag:"/Index"
              },
              {
                icon:"iconfont icon-leimupinleifenleileibie",
                routers:"分类搜索",
                tag:"/search"
              },
              {
                icon:"iconfont icon-icon",
                routers:"拔草",
                tag:"/grass"
              },
            ]
          }
      },
   
    }
</script>

<style scoped>
.Router-view{
  width: 100%;
  height: .7rem;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
}
.Router-view a{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #686868;
}
.Router-view a i{
  font-size: .3rem;
}
.Router-view a span{
  font-size: .09rem;
}
.Router-view .active{
    color: red;
  }

</style>

index.js所有代码：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/ProductList/Index'
import Indexhome from '@/components/Home/Indexhome'
import Stars from '@/components/Star/Stars'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Index',
      name: 'Index',
      component: Index
    },
    {
      path: '/Indexhome',
      name: 'Indexhome',
      component: Indexhome
    },
    {
      path: '/Stars',
      name: 'Stars',
      component: Stars
    },
  ]
})