CSS3之Tabs布局效果

最新推荐文章于 2024-05-20 15:06:11 发布

原创最新推荐文章于 2024-05-20 15:06:11 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #Tabs #导航条 #vue #Html

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文介绍如何使用Vue.js中的Router组件实现Tab页面间的切换功能。通过`<router-link>`组件及其`to`属性，可以轻松创建导航链接，并在不同的Tab页面间进行跳转。同时，文章展示了如何设置样式以适应布局需求。

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

<div id="app">
    <div class="tabs">
        <div class="tabs-item">
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/Tab1">Tab1</router-link>
        <div>
        <div class="tabs-item">
            <router-link to="/Tab2">Tab2</router-link>
        <div>
        <div class="tabs-item">
            <router-link to="/Tab2">Tab2</router-link>
        <div>
    <div>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<style lang="stylus" rel="stylesheet/stylus">
    #app
      .tabs
         display: flex
         width: 100%
         height: 40px
         line-height: 40px
         .tabs-item
            flex: 1
            text-align: center     
</style>

vue-loader插件中有个postcss的插件可以帮我们搞定样式的兼容性