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
    },
  ]
})
複製代碼