Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换
效果
?
實(shí)現(xiàn)
Vue Router 官方文檔
https://router.vuejs.org/zh/guide/
用 Vue.js + Vue Router 創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用 Vue.js ，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把 Vue Router 添加進(jìn)來(lái)，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。
新建Vue項(xiàng)目
參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84481606
項(xiàng)目地址：
https://github.com/badaoliumang/vuemusicplayer
?
刪改組件
刪掉HelloWorld.vue,在src下新建pages目錄，用于存放單頁(yè)面。
下載靜態(tài)資源assert，將src下的assets替換掉。
靜態(tài)資源下載地址：
CSDN:
https://download.csdn.net/download/badao_liumang_qizhi/10806811
Github:
https://github.com/badaoliumang/VueMusicPlayerAssert
修改Vue項(xiàng)目
App.vue
刪掉div中的img，將style中的代碼修改為
*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微軟雅黑";} img{border:none;max-width:100%;vertical-align:middle;} body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden} h1,h2,h3,h4,h5,h6{font-size:100%;} input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;} table{border-collapse:collapse;} input,select,textarea{outline:none;border:none;background:none;} a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());} a:link,a:active{text-decoration:none;} a:visited{text-decoration:none;} a:hover{color:#f00;text-decoration:none;} a{text-decoration:none;-webkit-touch-callout:none;} em,i{font-style:normal;} li,ol{list-style:none;} html{font-size:16px;} .clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;} .fl{float:left;} .fr{float:right;} body{ margin:0 auto;max-width:640px; min-width:320px;color:#555;background:#f1f1f1;height:100%;} a{color: #222;text-decoration: none} .router-link-active{color: red !important;}修改后的App.vue完整代碼
<template><div id="app"><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view/></div> </template><script> export default {name: 'App' } </script><style> *{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微軟雅黑";} img{border:none;max-width:100%;vertical-align:middle;} body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden} h1,h2,h3,h4,h5,h6{font-size:100%;} input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;} table{border-collapse:collapse;} input,select,textarea{outline:none;border:none;background:none;} a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());} a:link,a:active{text-decoration:none;} a:visited{text-decoration:none;} a:hover{color:#f00;text-decoration:none;} a{text-decoration:none;-webkit-touch-callout:none;} em,i{font-style:normal;} li,ol{list-style:none;} html{font-size:16px;} .clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;} .fl{float:left;} .fr{float:right;} body{ margin:0 auto;max-width:640px; min-width:320px;color:#555;background:#f1f1f1;height:100%;} a{color: #222;text-decoration: none} .router-link-active{color: red !important;} </style>新建主頁(yè)面index.vue
在pages文件夾下新建文件index.vue
用于主頁(yè)面。
<template lang="html"> <div class="index"><ul><li><router-link to="/home"><img src="../assets/logo-ea5.png" alt=""></router-link></li><li><router-link to="/artists">歌手</router-link></li><li><router-link to="/listcate">榜單</router-link></li><li><router-link to="/ucenter">我的</router-link></li><li><router-link to="/search">搜索</router-link></li></ul><router-view /> </div> </template><script> export default { } </script><style scoped>.index img{width: 26px;height: 26px; }.index ul{display: flex;height: 50px;line-height: 50px;background: #f9f9f9; }.index ul li {flex: 1;text-align: center; }.index ul li a{font-size: 16px;color: #999; }</style>新建歌手頁(yè)面artists.vue
<template lang="html"><div class="">歌手頁(yè)面</div> </template><script> export default { } </script><style lang="css"> </style>新建home.vue主頁(yè)面
<template lang="html"><div class="">主頁(yè)面</div> </template><script> export default { } </script><style lang="css"> </style>?
新建listcate榜單頁(yè)面??
<template lang="html"><div class="">榜單</div> </template><script> export default { } </script><style lang="css"> </style>?
新建search.vue搜索頁(yè)面
<template lang="html"><div class="">搜索</div> </template><script> export default { } </script><style lang="css"> </style>?
新建ucenter.vue我的頁(yè)面
<template lang="html"><div class="">我的</div> </template><script> export default { } </script><style lang="css"> </style>?
Router下的index.js修改
?
項(xiàng)目總結(jié)構(gòu)
項(xiàng)目是在Atom中打開(kāi)，關(guān)于Atom的使用等參考：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83280765
總結(jié)說(shuō)明
1.在index.vue中
<!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
<!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
2.在index.vue中
<!-- 路由出口 -->
?<!-- 路由匹配到的組件將渲染在這里 -->
?<router-view></router-view>
3.定義路由組件
可以從其他文件import進(jìn)來(lái)
在router下的index.js中
import Index from '@/pages/index' import Home from "@/pages/home" import Artists from "@/pages/artists" import ListCate from "@/pages/listcate" import Ucenter from "@/pages/ucenter" import Search from "@/pages/search"4.定義路由
在在router下的index.js中
// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是
// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者，只是一個(gè)組件配置對(duì)象。
還可以表示嵌套關(guān)系，加children。
啟動(dòng)項(xiàng)目
在項(xiàng)目目錄下打開(kāi)cmd命令行輸入：
npm start然后打開(kāi)瀏覽器窗口，輸入：
http://localhost:8080/#/
然后打開(kāi)檢查選項(xiàng)，谷歌瀏覽器按F12鍵，將瀏覽器模擬為手機(jī)
?
此部分代碼對(duì)應(yīng)分階段代碼中階段一
分階段代碼下載位置：
https://download.csdn.net/download/badao_liumang_qizhi/10846557
總結(jié)
以上是生活随笔為你收集整理的Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Vue实现仿音乐播放器3-将项目托管到g
- 下一篇： Vue实现仿音乐播放器5-实现今日推荐访