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

素颜马尾好姑娘i 2023-10-06 17:22 4阅读 0赞

一、使用vue-cli脚手架搭建项目，并创建以下文件  
![在这里插入图片描述][20210416233305956.png]  
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文件

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

<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>

最终结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 2]

[20210416233305956.png]: https://img-blog.csdnimg.cn/20210416233305956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210416234144316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210416234231276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210416234251135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70