用router-link做一个底部导航组件

最新推荐文章于 2023-02-24 00:06:57 发布

milli236

最新推荐文章于 2023-02-24 00:06:57 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/milli236/article/details/78274014

Vue.js 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在Vue.js中使用`router-link`创建一个底部导航组件。通过设置`router-link-active`类和在路由配置中定义`active`类，实现导航项随着路由变化而激活状态的切换。为解决首页路由的特殊性，可以调整路由名称或利用`exact`属性进行精确匹配。详细指南参考Vue Router官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代码bottom.vue

<template>
    <div class="bottom">
      <ul class="bottom-ul">
          <router-link tag="li" :to="{path:'/home'}">
            <i class="iconfont icon-home"></i>
            <span>首页</span>
          </router-link>
          <router-link tag="li" :to="{path:'/index'}">
            <i class="iconfont icon-fenlei"></i>
            <span>分类</span>
          </router-link>
          <router-link tag="li" :to="{path:'/cart'}">
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
          </router-link>
          <router-link tag="li" :to="{path:'/UserCenter'}">
            <i class="iconfont icon-my"></i>
            <span>会员中心</span>
          </router-link>
      </ul>
    </div>
</template>

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

<style scoped>

  @import "../../assets/icon/iconfont.css";

  /*bottom*/
  .bottom{
    width: 100%;
    height: 8vh;
    color: #BEBEC0;
    /*border: 1px solid #0000ff;*/
    background-color: #404042;
    position: fixed;
    bottom:0;
  }
  .bottom-ul{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .bottom-ul>li{
    height: 100%;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .active{
    background-color: yellow;
  }
  /*底部router-link 的激活样式切换*/
  .router-link-active{
    color: #fff;
    background-color: #262628;
    border-bottom: 2px solid #CF274A;
  }
  .bottom-ul>li>i{
    font-size: 1.5rem;
  }
  .bottom-ul>li>span{
    font-size: 0.75rem;
  }
</style>

2.关于路由设置。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Swiper from '@/components/test/swiper'     //test
import Checkbox from '@/components/test/checkbox'     //test

import Home from '../page/home.vue'
import Detail from '../page/detail.vue'
import Cart from '../page/cart.vue'
import Index from '../page/child/index.vue'
import UserCenter from '../page/child/userCenter.vue'
import New from '../page/child/new.vue'
import ZheKou from '../page/child/zhekou.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      redirect:'/home/new',
      component: Hello
    },
    {
      path:'/home',
      name:'Home',
      component:Home,
      redirect:'/home/new',
      children:[
        {path:'/home/new',name:'new',component:New},
        {path:'/home/zk',name:'zk',component:ZheKou},
      ]
    },
    { path:'/detail', name:'Detail',component:Detail},
    { path:'/cart',   name:'Cart',  component:Cart},
    { path:'/index',  name:'Index',  component:Index},
    { path:'/userCenter',  name:'UserCenter',  component:UserCenter},

    {
      path:'/swiper',
      name:'swiper',
      component:Swiper
    },
    {path:'/checkbox',name:'Checkbox',component:Checkbox}

  ],
  // linkActiveClass:'active'
})

3.关于样式切换问题：

a 直接在页面style里用了。class类：router-link-active

/*底部router-link 的激活样式切换*/
  .router-link-active{
    color: #fff;
    background-color: #262628;
    border-bottom: 2px solid #CF274A;
  }

b.也可以设置属性activeClass

c.也可以在路由配置那里命名一个active，然后页面里写一个active类，

样式切换跟随路由而激活。精确匹配还可以用属性exact,,,

首页容易会一直存在的问题。是路由地址名的不匹配，可以吧名字调整。或者加上exact做严格匹配

具体可以参考官方文档点击打开链接 https://router.vuejs.org/zh-cn/api/router-link.html