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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 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
php存储过程调用实例代码
2013/02/03 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue组件的写法汇总
2018/04/12 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python 检测图片是否有马赛克
2020/12/01 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
财务会计专业应届毕业生求职信
2013/10/18 职场文书
北京大学自荐信范文
2014/01/28 职场文书
揭牌仪式主持词
2014/03/19 职场文书
财产公证书
2014/04/10 职场文书
男女朋友协议书
2014/04/23 职场文书
委托书如何写
2014/08/30 职场文书
万能检讨书2000字
2014/10/17 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫