router-link和router-view的样式问题
今天在学vue的路由管理器,学到了router-link和router-view,在练习的时候看见router-link和a标签一样的下划线就很难受,于是就:.box ul li{...router-link{color: white;text-decoration: none;}}然后发现并没有什么用,于是我打开检查看了看发现原来是浏览器把router-link渲染成了a标签,那这就好解决了,.
·
-
今天在学
vue
的路由管理器,学到了router-link
和router-view
,
在练习的时候看见router-link
和a
标签一样的下划线就很难受,于是就:.box ul li{ ... router-link{ color: white; text-decoration: none; } }
-
然后发现并没有什么用,于是我打开检查看了看
-
发现原来是浏览器把
router-link
渲染成了a
标签,那这就好解决了,直接给a标签设样式不就行了:.box ul li{ ... a{ color: white; text-decoration: none; } }
-
于是我又想到了
router-views
,先给它定个类名设置个样式看看:<router-view class="box-view"></router-view> ... <script> .box-view{ border: 1px solid black; background-color: tomato; } </script>
-
然后我检查了一下,果然
router-view
本质上其实是所展示组件的唯一根节点,我们设置的类名,实际上是给这个唯一根节点添加的 -
那么聪明的兄弟们估计也发现了,我们可以把一些通用的
css
设置在router-view
中,这样大大减少了代码重复率,提高了编程效率,好耶
更多推荐
已为社区贡献1条内容
所有评论(0)