时间:2021-05-26
这里以网易云音乐作为示例,效果图:
我们先一层一层写导航
先设计第一层
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文件,来操作这些区域的内容
设计好样式后,我们可以发现我们的页面上出现了导航
那我们如何设置默认选项并未其设置样式呢?
先定义一个定义当前页面的变量:
设置选中样式:
.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>这时我们发现我们的二级导航已经出现了
同样,设置当前页面的变量,利用class变量以及三元表达式,实现功能
至此,我们的vue-router实现的二级导航就实现了
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue嵌套路由:实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染):Demo访问时
导航钩子vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的,单个路由独享的,或者组件级的。全
本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下主要是对二级菜单和当前点击的处理:点击导航时,如果有二级菜单,就切换二级菜单
导航钩子vue-router提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的,单个路由独享的,或者组件级的。全
注意:vue-router是无法完全控制前端路由权限。1、实现思路使用vue-router实例函数addRoutes动态添加路由规则,不多废话直接上思维导图:2