• 今天在学vue的路由管理器,学到了router-linkrouter-view,
    在练习的时候看见router-linka标签一样的下划线就很难受,于是就:

    .box ul li{
          ...
          router-link{
            color: white;
            text-decoration: none;
          }
        }
    

    image.png

  • 然后发现并没有什么用,于是我打开检查看了看

    image.png

  • 发现原来是浏览器router-link渲染成了a标签,那这就好解决了,直接给a标签设样式不就行了:

    .box ul li{
         ...
         a{
           color: white;
           text-decoration: none;
         }
       }
    

    image.png

  • 于是我又想到了router-views,先给它定个类名设置个样式看看:

    <router-view class="box-view"></router-view>
    ...
    <script>
        .box-view{
          border: 1px solid black;
          background-color: tomato;
        }
    </script>
    

    image.pngimage.png

  • 然后我检查了一下,果然router-view本质上其实是所展示组件的唯一根节点,我们设置的类名,实际上是给这个唯一根节点添加

    image.png

  • 那么聪明的兄弟们估计也发现了,我们可以把一些通用的css设置在router-view,这样大大减少了代码重复率,提高了编程效率,好耶

    image.png

image.png

Logo

前往低代码交流专区

更多推荐