vue.js自定义底部选项卡-使用click事件替代路由切换页面，并修改选中图标字体颜色

一、使用vue-cli脚手架搭建项目，并创建以下文件

Home.vue文件

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Home'
    }
  }
}
</script>

<style scoped>
  
</style>

PageOne.vue和PageTwo.vue文件内容和Home.vue文件一样，只是msg分别为msg: 'page one’和msg: ‘page two’

FooterGuide.vue文件

代码	说明
:class="{on:’/home’===$route.path}"	实现修改选中图标字体颜色
@click=“goto(’/home’)”	实现路由跳转

<template>
  <div>
    FooterGuide
    <a href="javascript:;" :class="{on:'/home'===$route.path}" @click="goto('/home')">首页</a>
    <a href="javascript:;" :class="{on:'/page_one'===$route.path}" @click="goto('/page_one')">页面1</a>
    <a href="javascript:;" :class="{on:'/page_two'===$route.path}" @click="goto('/page_two')">页面2</a>
  </div>
</template>

<script>
export default {
  methods:{
    goto(path){
      this.$router.replace(path);
    }
  }
};
</script>

<style>
.on{
    color: rgb(115, 221, 221);
  }
</style>

路由文件夹下得index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import PageOne from '@/components/PageOne'
import PageTwo from '@/components/PageTwo'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            redirect: 'home'
        },
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/page_one',
            name: 'PageOne',
            component: PageOne
        },
        {
            path: '/page_two',
            name: 'PageTwo',
            component: PageTwo
        }
    ]
})

App.vue文件

<template>
  <div id="app">
    <router-view />
    <FooterGuide></FooterGuide>
  </div>
</template>

<script>
import FooterGuide from "@/components/FooterGuide.vue";
export default {
  name: "App",
  components: {
    FooterGuide
  }
};
</script>

<style></style>

最终结果