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

功能展示：

 

需求：

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

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

 

结构：

Home为 导航首页

Star为 星星有礼

ProductList为 今日必抢

routers.vue为底部导航组件

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

tag是路径 ；

active-class做样式的切换；

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
    },
  ]
})