从实例入手学习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/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完整代码

新建主页面index.vue

在pages文件夹下新建文件index.vue

用于主页面。

新建歌手页面artists.vue

新建home.vue主页面

 

新建listcate榜单页面  

 

新建search.vue搜索页面

 

新建ucenter.vue我的页面

 

 

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中

 
 

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