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 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
德劲1103二次变频版的打磨
2021/03/02 无线电
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP无限分类(树形类)
2013/09/28 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript中对象介绍
2014/12/31 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
使用Turtle画正螺旋线的方法
2017/09/22 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python实现学生管理系统开发
2020/07/24 Python
python使用建议与技巧分享(一)
2020/08/17 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
《在大海中永生》教学反思
2014/02/24 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js