使用Vue路由导致样式变化

最新推荐文章于 2024-07-23 16:00:30 发布

Bossenl

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量503

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sen123456m/article/details/126306901

版权

使用Vue路由导致样式变化是使用了Flex布局

如图,vueRouter会把router-link作为连接导致这一层没有flex
在这里插入图片描述

解决方法:

为a连接这一层添加flex布局

    .navItem {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      width: 1.25rem;
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      img {
        width: 40px;
        height: 40px;
      }
    }