• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

【Vue.js】vue-router实现二级导航切换路由及高亮显示

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0709/6618.html 1190000019699606

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

clipboard.png

我们先一层一层写导航
先设计第一层
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文件,来操作这些区域的内容

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

clipboard.png

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

 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>

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

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

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

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!