002_Vue音乐播放器（头部路由导航制作）

于 2019-10-15 20:47:44 发布
阅读量357 收藏 1
点赞数
分类专栏： Vue音乐播放器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CWH0908/article/details/102574576
版权

这部分是普通的页面布局，直接上代码：

头部顶部栏

 

头部导航栏

 

配置路由规则

 

设置路由激活状态的样式

 

将激活样式放入index.less 的全局样式中

 

在App.vue中使用 头部顶部栏组件和 头部导航组件 ， 其中先创建对应的路由组件，使用命名路由来放置路由组件

 

最终的效果图

友人C君~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cloudmusic_音乐播放器_网易云音乐_vue_
10-03
基于vue模仿的网易云音乐，基本实现了播放器的首页、热歌榜、搜索和播放界面。采用Ajax与后台进行数据交换，可以获取到网易云音乐的推荐歌单、推荐音乐和热歌榜等数据。也可以通过搜索功能实现搜索歌手来寻找歌曲。
音乐播放器自定义导航栏
qq_53501707的博客
11-23 336
音乐播放器自定义导航栏封装通用的小程序自定义导航组件音乐播放器的导航栏实现点击导航栏切换首先，在小程序中，会有一个状态栏高度，我们首先要考虑状态栏的占位，可以用来获取statusBarHeight的高度，然后用此宽度的容器占位。">{{title}}//用以下css来完成默认插槽.default {}}
音乐导航栏（鼠标移入便播放音乐）
java_zhaoyanli的专栏
05-24 851
Document *{margin: 0;padding: 0;} li{list-style: none;} ul{width: 800px;height: 35px;border: 1px solid #ccc;margin:50px auto;overflow: hidden;} ul li{width: 99px;h
vue侧边栏导航，右侧显示对应内容
热门推荐
weixin_42429288的1博客
10-30 8万+
最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 age...
如何用vuex来管理顶部导航栏显示隐藏（状态管理）
姚辉乾
06-20 4061
先安装vuexnpm安装vuex然后在src下创建文件夹store;创建store.js打开main.js然后打开app.vue就可以用修改vuex状态这样做：
音乐播放器的悬浮菜单按钮
未来很长，但我会努力的走下去。
08-25 1623
FloatingMusicMenu 项目地址：cpacm/FloatingMusicMenu  简介：一款可用于音乐播放器的悬浮菜单按钮 ui-floatingactionbutton-menu- 一款可用于音乐播放器的悬浮菜单按钮，它是基于 FloatingActionButton 上完成，能够联动音乐播放器显示歌曲的进度，设置歌曲的封面和通过封面的旋转来展示播放的状态（停止或者播放）。...
vue 挂载路由到头部导航的方法
08-28
Vue 挂载路由到头部导航的方法 Vue 框架提供了强大的路由功能，允许开发者轻松地创建单页应用程序（SPA）。在本文中，我们将介绍如何将路由挂载到头部导航，实现点击头部菜单项时切换路由的功能。 首先，我们需要...
基于vue.js制作的mp3音乐播放器
06-11
【Vue.js制作MP3音乐播放器详解】 Vue.js是一款轻量级的前端JavaScript框架，以其易学易用、高效和可扩展性而受到开发者们的喜爱。在这个项目中，我们将深入探讨如何利用Vue.js来构建一个功能完备的MP3音乐播放器。...
vue 音乐播放器 视频播放器
03-17
更新上一个资源BUG,添加了网易云API,提供手机用户登录,添加朋友,MV,下载等核心功能.环境 : node.js , php, windows All . 需要下载node.js服务器 ,地址 ...
VUE根据路由跳转改变头部导航栏文字
marsur的博客
06-19 3720
效果图 步骤如下： 1.在router/index.js路由文件通过定义每个页面中name的值来定义顶部导航栏的文字 { name:"琴房管理系统", path:"/myHome", component:() => import("../page/common/myHome.vue") } 2.父组件传值 2.1.在父组件APP.vue...
vue固定组件导航栏样式随着路由的切换而改变以及ele-ui表格的使用
weixin_44729896的博客
08-21 759
附上github地址:https://github.com/xuchenyang123/vue-nav.git
vue 动态的导航
kk
01-21 1517
我们要实现一个导航,可以根据后台传过来的数据进行改变的一个导航. 比如后台传一个导航数据时显示: 传二个导航数据时显示: 传三个导航数据时显示: 传四个导航数据时显示: 传五个导航数据时显示: 传六个导航数据时显示: 传七个导航数据时显示: 传8个导航数据时显示: 首先第一步是要解决这个正方形的问题,链接放上:https://mp.csdn.net...
vue项目中用elementUI写动态的顶部导航菜单（三级菜单）
a811567770的博客
02-22 1万+
第一次用elementUI写带有下拉的菜单 官方的例子是写死的，不用获取数据，网上找了些例子才整出来 参考链接：https://blog.csdn.net/hailangtuteng/article/details/81164859 ...
前端Vue项目——初始化及导航栏
infotw的博客
06-24 9855
正文 一、项目初始化 　　创建webpack模板项目如下所示： MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone...
用Vue来实现音乐播放器（五）：路由配置+顶部导航栏组件开发
weixin_30667301的博客
06-08 258
路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件import Recommend from '../components/recommend/recommend.vue' import Singer from '../componen...
vue和element框架搭配实现导航条跳转，点击按钮跳转页面导航条也跟着变换
搁浅_9527
09-23 3万+
首先，第一步，将element框架组件中选择 你想要的导航条类型 将其代码复制下来，js也复制，样式可以自己改 第二部，要想实现跳转就要用到router，在element框架中Menu Attribute中给了我们一个专门跳转的参数 router ，写进去就行了 以下是我的写法HTML部分<!--:default-active当前激活菜单的 index --> <el-m
vue-router ---- 解决页面刷新和路由改变时导航条样式问题
前端小愤青
10-31 7573
问题:   1.当我们在使用路由时，如果有导航条此时，我们在url地址栏目改变路由地址，此时路由内容更改但，导航条样式没有随着改动   2.当页面刷新时，url导航地址栏的路由和当前页面显示的不一致 解决:  1.通过watch监听路由地址的改变  2.使用钩子函数，改变路由 export default { name: 'App', data(){ ...
Vue使用element-ui菜单导航
peichuangbao5059的博客
07-26 1万+
效果图 目录截图 安装vue-router 和 element-ui vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 npm install vue-router --save npm install element-ui --save 关闭ESLint检查 新增配置文件src/vue.config.js 文件 module.exports = { ...
vue——element-ui项目中用如何点击导航菜单进行当前页面的router切换？图解只需三步！
最初都是小白
06-25 1万+
先给大家模拟一下场景： 想要的效果： 下面来看需要配置项    使用element-ui的 NavMenu导航，里面的菜单属性里有详细的介绍。 第一步配置属性，并把每一项的index改为想要跳转的path： 第二步在Home页加上< router-view />插槽： 第三步查看路由配置： ...
vue音乐播放器代码
最新发布
05-08
Vue音乐播放器代码的实现过程需要较为详细的代码解释，我在这里给您提供一份开源的Vue音乐播放器项目，您可以参考其中的代码实现方式。 这个开源项目是一个基于Vue.js和NeteaseCloudMusicApi的在线音乐播放器，实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值