* { padding: 0; margin: 0; } body { font-size: 14px; color: #4a4a4a; font-family: PingFangSC-Light; /*苹果设计的一款全新的中文系统字体，该字体支持苹果的动态字体调节技术*/ } ul { list-style: none; } a { text-decoration: none; }
最后在App.vue中引入和使用组件：
<template> <div> <!-- 导航区域 --> <LuffyHeader/> <router-view/> </div> </template> <script> import LuffyHeader from '@/components/Common/LuffyHeader' export default { name: 'App', components:{ LuffyHeader } } </script>
显示效果如下所示：
三、导航栏路由跳转
1、组件创建和路由配置编写
添加“首页”、“免费课程”、“轻课”、“学位课”四大组件，因此创建如下文件：
src/components/Home/Home.vue src/components/Course/Course.vue src/components/LightCourse/LightCourse.vue src/components/Micro/Micro.vue
在src/router/index.js中引入组件，配置路由规则：
import Vue from 'vue' import Router from 'vue-router' // @绝对路径 检索到 ...src/ // 如果Router当做局部模块使用一定要Vue.use(Router) // 以后在组件中，可以通过this.$router 获取Router实例化对象 // 路由信息对象 this.$routes 获取路由配置信息 import Home from '@/components/Home/Home' import Course from '@/components/Course/Course' import LightCourse from '@/components/LightCourse/LightCourse' import Micro from '@/components/Micro/Micro' Vue.use(Router) // 配置路由规则 export default new Router({ routes: [ { path: 'https://www.jb51.net/', redirect: '/home' // 访问/，直接跳转到/home路径 }, { path: '/home', name: 'Home', component: Home }, { path: '/course', name: 'Course', component: Course }, { path: '/home/light-course', name: 'LightCourse', component: LightCourse }, { path: '/micro', name: 'Micro', component: Micro } ] })
2、导航链接编写
修改 LuffyHeader.vue页面，编写导航链接：
<template> <!-- element-ui --> <el-container> <el-header height = '80px' > <div> <div> <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt=""> </div> <div> <ul> <li v-for="(list, index) in headerList" :key="list.id"> <a href="#" > {{ list.title }} </a> </li> </ul> </div> <div> <span>登录</span> | <span>注册</span> </div> </div> </el-header> </el-container> </template> <script> export default { name: 'LuffyHeader', data() { return { headerList: [ {id: '1', name: 'Home', title: '首页'}, {id: '2', name: 'Course', title: '免费课程'}, {id: '3', name: 'LightCourse', title: '轻课'}, {id: '4', name: 'Micro', title: '学位课程'} ], isShow: false } } } </script>
编写headerList列表及列表中的导航对象，在 导航栏中遍历对象获取对应信息，显示在页面效果如下所示：
3、router-link路由跳转
经过上面的编写，虽然导航栏已经可以正常显示，但是a标签是不会做自动跳转的。 需要使用 router-link 进一步改写LuffyHeader.vue，使得路由跳转得以渲染对应组件：
<template> <!-- element-ui --> <el-container> <el-header height = '80px' > <div> <div> <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt=""> </div> <div> <ul> <li v-for="(list, index) in headerList" :key="list.id"> <router-link :to="{name:list.name}"> {{ list.title }} </router-link> </li> </ul> </div> <div> <span>登录</span> | <span>注册</span> </div> </div> </el-header> </el-container> </template> <script> export default { name: 'LuffyHeader', data() { return { headerList: [ {id: '1', name: 'Home', title: '首页'}, {id: '2', name: 'Course', title: '免费课程'}, {id: '3', name: 'LightCourse', title: '轻课'}, {id: '4', name: 'Micro', title: '学位课程'} ], isShow: false } } } </script>
使用to='{name:list.name}'设置命令路由，这样点击a标签就可以跳转了。显示效果如下所示：
可以看到虽然点击了轻课，但是和其他导航项样式没有任何分别，需要设置路由active样式完成优化。
4、linkActiveClass设置路由的active样式
linkActiveClass 全局配置 <router-link> 的默认“激活 class 类名”。
active-class 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
（1）在路由配置linkActiveClass
在 src/router/index.js 中做如下配置：