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