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

淡淡的烟草味﹌ 2023-10-18 11:44 57阅读 0赞

## 效果 ##

![Image 1][]![20181125235629606.gif][]

## 实现 ##

### Vue Router 官方文档 ###

[https://router.vuejs.org/zh/guide/][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_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_84481606]

项目地址：

[https://github.com/badaoliumang/VueRouterUseDemo][https_github.com_badaoliumang_VueRouterUseDemo]

### 删改组件 ###

删掉HelloWorld.vue,在src下新建pages目录，用于存放单页面。

下载静态资源assert，将src下的assets替换掉。

静态资源下载地址：

CSDN:

[https://download.csdn.net/download/badao\_liumang\_qizhi/10806811][https_download.csdn.net_download_badao_liumang_qizhi_10806811]

Github:

[https://github.com/badaoliumang/VueMusicPlayerAssert][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
              }
          ]
        }
    
      ]
    })

## 项目总结构 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]![Image 1][]

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/83280765][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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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

http://localhost:8080/#/

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

![Image 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

[Image 1]: 
[20181125235629606.gif]: https://img-blog.csdnimg.cn/20181125235629606.gif
[https_router.vuejs.org_zh_guide]: https://router.vuejs.org/zh/guide/
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_84481606]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84481606
[https_github.com_badaoliumang_VueRouterUseDemo]: https://github.com/badaoliumang/VueRouterUseDemo
[https_download.csdn.net_download_badao_liumang_qizhi_10806811]: https://download.csdn.net/download/badao_liumang_qizhi/10806811
[https_github.com_badaoliumang_VueMusicPlayerAssert]: https://github.com/badaoliumang/VueMusicPlayerAssert
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181126000011337.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83280765]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83280765
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181125235957332.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181125235959833.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70