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

编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化来一起学习学习吧

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

我们先一层一层写导航

先设计第一层

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文件,来操作这些区域的内容

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

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

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>

狼蚁网站SEO优化我们设计二级导航

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>

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

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

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

总结

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板