效果

实现

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中

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键，将浏览器模拟为手机

从实例入手学习Vue-router的使用-实现音乐导航菜单切换

效果

实现