效果
实现
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/VueRouterUseDemo
删改组件
删掉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中
<!-- 使用 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() 创建的组件构造器,
// 或者,只是一个组件配置对象。
{
path: '/',
name: 'Index',
component: Index,
children:[
{
path: 'home',
component: Home
},
还可以表示嵌套关系,加children。
启动项目
在项目目录下打开cmd命令行输入:
npm start
然后打开浏览器窗口,输入:
http://localhost:8080/#/
然后打开检查选项,谷歌浏览器按F12键,将浏览器模拟为手机