关于vue.js:Vue实现头部导航

2次阅读

共计 1127 个字符，预计需要花费 3 分钟才能阅读完成。

views 文件下创立 Layout.vue，Mine.vue, Search.vue, Topic.vue 组件
配置路由，Layout 组件是入口文件，其余组件作为 Layout 组件的子组件
配置点击高亮 –> linkActiveClass : “active”, 上代码

const router = new VueRouter({

  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: "active",   // 配置点击高亮
  routes: [{
      path: "/",
      name: "Layout",
      component: Layout,
      children: [{
          path: '/',
          name: 'Home',
          component: Home
        },
        {
          path: 'mine',
          name: 'mine',
          component: Mine
        },
        {
          path: 'search',
          name: 'search',
          component: Search
        },
        {
          path: 'topic',
          name: 'topic',
          component: Topic
        }
      ]
    }
  ]
  
})

App.vue 中只留一个路由进口，App 内的款式全副删除

<template>
             <div id="app">
              <router-view></router-view>
              </div>
</template>

配置 Layout 组件显示路由

<template>
    <div>
        <ul class="top-nav">
            <li>
                <router-link exact to="/"> 首页 </router-link> 
            </li>
            <li>
                <router-link to="/mine"> 我的 </router-link>
            </li>
            <li>
                <router-link :to="{name:'search'}"> 搜寻 </router-link> 
            </li>
            <li>
                <router-link :to="{name:'topic'}"> 榜单 </router-link> 
            </li>
        </ul>

        <router-view/>
    </div>
</template>
<script>
export default {name:"Layout",}
</script>
<style lang="less" scoped>
.top-nav {
    display: flex;
    background: #fff;
    li {
        list-style: none;
        flex: 1;
        text-align: center;
        padding-top: 10px;
        a {
            text-decoration: none;
            display: block;
            padding-bottom: 8px;
        }
        .active {border-bottom: 2px solid #ff0000;}
    }
}
</style>

正文完