Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换
效果
?
實現
Vue Router 官方文檔
https://router.vuejs.org/zh/guide/
用 Vue.js + Vue Router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 Vue Router 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。
新建Vue項目
參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84481606
項目地址：
https://github.com/badaoliumang/vuemusicplayer
?
刪改組件
刪掉HelloWorld.vue,在src下新建pages目錄，用于存放單頁面。
下載靜態資源assert，將src下的assets替換掉。
靜態資源下載地址：
CSDN:
https://download.csdn.net/download/badao_liumang_qizhi/10806811
Github:
https://github.com/badaoliumang/VueMusicPlayerAssert
修改Vue項目
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>新建主頁面index.vue
在pages文件夾下新建文件index.vue
用于主頁面。
<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>新建歌手頁面artists.vue
<template lang="html"><div class="">歌手頁面</div> </template><script> export default { } </script><style lang="css"> </style>新建home.vue主頁面
<template lang="html"><div class="">主頁面</div> </template><script> export default { } </script><style lang="css"> </style>?
新建listcate榜單頁面??
<template lang="html"><div class="">榜單</div> </template><script> export default { } </script><style lang="css"> </style>?
新建search.vue搜索頁面
<template lang="html"><div class="">搜索</div> </template><script> export default { } </script><style lang="css"> </style>?
新建ucenter.vue我的頁面
<template lang="html"><div class="">我的</div> </template><script> export default { } </script><style lang="css"> </style>?
Router下的index.js修改
?
項目總結構
項目是在Atom中打開，關于Atom的使用等參考：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83280765
總結說明
1.在index.vue中
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
2.在index.vue中
<!-- 路由出口 -->
?<!-- 路由匹配到的組件將渲染在這里 -->
?<router-view></router-view>
3.定義路由組件
可以從其他文件import進來
在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中
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
還可以表示嵌套關系，加children。
啟動項目
在項目目錄下打開cmd命令行輸入：
npm start然后打開瀏覽器窗口，輸入：
http://localhost:8080/#/
然后打開檢查選項，谷歌瀏覽器按F12鍵，將瀏覽器模擬為手機
?
此部分代碼對應分階段代碼中階段一
分階段代碼下載位置：
https://download.csdn.net/download/badao_liumang_qizhi/10846557
總結
以上是生活随笔為你收集整理的Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue实现仿音乐播放器3-将项目托管到g
- 下一篇： 百度音乐接口使用示例