vue-router二级导航切换路由及高亮显示的实现方法


Posted in Javascript onJuly 10, 2019

这里以网易云音乐作为示例,效果图:

vue-router二级导航切换路由及高亮显示的实现方法

我们先一层一层写导航

先设计第一层

1.设计导航页面样式

第一个导航页面为Discover

Discover.vue:

<!-- -->
<template>
 <div>
 发现
 </div>
</template>


<script>
export default {
 name: "discover",
 data() {
 return {
 };
 }
};
</script>
<style scoped>
</style>

第二个导航页面为Mymusic

其余代码一样,注意要把name改为相应路由

name: "mymusic"

2.配置路由

index.js:

import DisCover from '@/components/DisCover'
import MyMusic from '@/components/MyMusic'
……

 routes: [
 {
  path: '/discover',
  name: 'discover',
  component: DisCover
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  component: MyMusic
 }
 ]

3.使用router-link制作导航

我们创建一个新组件Guide.vue,把他插入到app.vue中

设计好路由的数据源:

guides:[
  {
   id:0,
   name:'发现音乐',
   link:'/discover'
  },{
   id:1,
   name:'我的音乐',
   link:'/mymusic'
  },
  {
   id:2,
   name:'朋友',
   link:'friend'
  },
  {
   id:3,
   name:'商城',
   link:'mall'
  },
  {
   id:4,
   name:'音乐人',
   link:'musician'
  },
  {
   id:5,
   name:'下载客户端',
   link:'download'
  }
  ]

Guide.vue:

<ul class="nav nav-pills main-nav">
   <li v-for="(item,index) in guides" :key="index" role="presentation"
   :class="item.id==guidecurrent?'guide-active':''"
    >
    <router-link :to="item.link">{{item.name}}</router-link>
    </li>
   
   </ul>

to:是我们的导航路径,要填写的是你在router/index.js文件里配置的path值

4.单页面多路由区域操作

我们在App.vue中加入<router-view>

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

<router-view>区域通过配置路由的js文件,来操作这些区域的内容

设计好样式后,我们可以发现我们的页面上出现了导航

vue-router二级导航切换路由及高亮显示的实现方法

那我们如何设置默认选项并未其设置样式呢?
先定义一个定义当前页面的变量:

guidecurrent:0

设置选中样式:

.guide-active{
 background: black;
}

.guide-active::after {
 content: "??";
 font-size: 8px;
 position: absolute;
 color: rgb(182, 15, 15);
 top: 87%;
 left: 50%;
 transform: translate(-10px, -5px);
}

通过v-bind属性将class属性赋给每一个<li>元素

也就是说只有当前页面的<li>元素才会被加载active样式

这里注意vue中的属性如果要以变量设置

必须要写成 v-bind:属性名]="[属性值]"的形式

<li v-for="(item,index) in guides" :key="index" role="presentation"
  :class="item.id==guidecurrent?'guide-active':''"
   >
  <router-link :to="item.link">{{item.name}}</router-link>
 </li>

下面我们设计二级导航

5.二级导航页面样式

与上面相同,我们创建两个.vue页面

Rank.vue和Recommend.vue

6.配置路由

index.js

routes: [
 {
  path: '/discover',
  name: 'discover',
  component: DisCover,
  children:[
  {path:'rec',component:reccommend},
  {path:'rank',component:rank},
  ]
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  component: MyMusic
 }
 ]

6.配置二级导航的<router-link>

<ul class="nav nav-pills">
  <li role="presentation" v-for="(item,index) in guides" :key="index"
   :class="item.id==discovercurrent?'active':''"
  >
   <router-link :to="item.id">{{item.name}}</router-link>
  </li>
  </ul>

这时我们发现我们的二级导航已经出现了

vue-router二级导航切换路由及高亮显示的实现方法

同样,设置当前页面的变量,利用class变量以及三元表达式,实现功能

至此,我们的vue-router实现的二级导航就实现了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
javascript解析json数据的3种方式
May 08 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
Vue编程式跳转的实例代码详解
Jul 10 #Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 #Javascript
Vue事件修饰符native、self示例详解
Jul 09 #Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 #Javascript
微信小程序wx.request拦截器使用详解
Jul 09 #Javascript
javascript实现图片轮播代码
Jul 09 #Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 #Javascript
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
php分页函数
2006/07/08 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jquery实现图片预加载
2015/12/25 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
python实现复制整个目录的方法
2015/05/12 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
实习生自我评价
2014/01/18 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
2015年新农合工作总结
2015/03/30 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python