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修改

import Vue from 'vue'
import Router from 'vue-router'
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"
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',component: Index,children:[{path: 'home',component: Home},{path:"artists",component:Artists},{path:"listcate",component:ListCate},{path:"ucenter",component:Ucenter},{path:"search",component:Search}]}]
})

项目总结构

项目是在Atom中打开，关于Atom的使用等参考：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83280765

总结说明

1.在index.vue中

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() 创建的组件构造器，
// 或者，只是一个组件配置对象。

  {path: '/',name: 'Index',component: Index,children:[{path: 'home',component: Home},

还可以表示嵌套关系，加children。

启动项目

在项目目录下打开cmd命令行输入：

npm start

然后打开浏览器窗口，输入：

http://localhost:8080/#/

然后打开检查选项，谷歌浏览器按F12键，将浏览器模拟为手机

此部分代码对应分阶段代码中阶段一

分阶段代码下载位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557