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

blair 发布于2019-08-23 18:33 / 3625人阅读

摘要：这里以网易云音乐作为示例，效果图我们先一层一层写导航先设计第一层设计导航页面样式第一个导航页面为发现第二个导航页面为其余代码一样，注意要把改为相应路由配置路由使用制作导航我们创建一个新组件把他插入到中设计好路由的数据源发现音乐我的

这里以网易云音乐作为示例，效果图：

我们先一层一层写导航
先设计第一层
1.设计导航页面样式
第一个导航页面为Discover

Discover.vue：

第二个导航页面为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：

       
            
             {{item.name}}

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

4.单页面多路由区域操作
我们在App.vue中加入

区域通过配置路由的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属性赋给每一个

元素
也就是说只有当前页面的

元素才会被加载active样式
这里注意vue中的属性如果要以变量设置
必须要写成 v-bind:属性名]="[属性值]"的形式

  
     {{item.name}}

下面我们设计二级导航

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.配置二级导航的

 
        
          {{item.name}}

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

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

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

云服务器 GPU云服务器栏目高亮显示 jquery高亮显示 linux 高亮显示路由和导航

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105430.html

从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
vue-router 基础知识点

摘要：路由模块的本质就是建立起和页面之间的映射关系。模式的原理是事件监测值变化，可以在对象上监听这个事件。这两个方法应用于浏览器记录栈，在当前已有的基础之上，它们提供了对历史记录修改的功能。 vue-router 这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是...

ningwang 2019-08-26 10:41 评论0 收藏0
Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard d

摘要：但是有边框，不好看啊再次美化使用使用图标库安装这里主要贴一下的改动，其他的代码就不贴了看下效果图标什么的都有了。另外文件需要加上看看效果点击菜单，路径跳转，并且每次都是单独去加载路由的文件。做完这个demo后，我体会到，Vue组件化，webpack, Vue-router等，并不是很难学习，你需要的只是拿起斧头的勇气在做demo的过程中，我遇到一个问题，就是vue-router懒加载...

Near_Li 2019-08-21 17:38 评论0 收藏0