Vue学习笔记05-H5实例百度音乐

最新推荐文章于 2025-12-23 20:34:05 发布

原创

最新推荐文章于 2025-12-23 20:34:05 发布 · 691 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#python

import Vue from 'vue'
import VueRouter from "vue-router"
import Index from "../pages/index" 
import MusicNav from "../pages/MusicNav" 
import HotMusic from "../pages/MusicList/HotMusic"
import NewMusic from "../pages/MusicList/NewMusic"
import KingMusic from "../pages/MusicList/KingMusic"


Vue.use(VueRouter);

export default new VueRouter({
    
    
    routes: [
        { path: '/', name: 'Index', component: Index, redirect: 'HotMusic', 
            children: [
                 { path: 'hot', name: 'HotMusic', component: HotMusic},
                 { path: 'new', name: 'NewMusic', component: NewMusic},
                 { path: 'king', name: 'KingMusic', component: KingMusic},
         ]},
    ]
});

src/main.js

import Vue from 'vue'
import App from './App'
import Axios from 'axios'
import router from './router'


Vue.prototype.$axios = Axios;  
Vue.prototype.HOST = '/api'

Vue.config.productionTip = false 

new Vue({
    
    
  el: '#app', 
  router,
  components: { App }, 
  template: '<App/>' 
})

src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
     
     
  name: 'App',
  data() {
     
     
    return {
     
     
     
    }
  },
  components: {
     
     
    Index
  }
}
</script>

<style>
</style>

注：App.vue中应使用路由的形式引入，如果使用组件的方式引入index.vue会导致显示两次。

src/pages/index.vue

<template>
    <div class="container">
        <router-view/>
    </div>
</template>
<script>
import MusicNav from './MusicNav'
export default {
     
     
    name: 'index',
    data() {
     
     
        return {
     
     

        }
    },
    components:{
     
     
        MusicNav
    }
}
</script>
<style>
</style>

src/pages/MusicNav.vue

<template>
    <div class="musicnav">
        <div class="bars">
            <router-link to="/musiclist/hot">热歌榜</router-link>
            <router-link to="/musiclist/new">新歌榜</router-link>
            <router-link to="/musiclist/king">King榜</router-link>
         </div> 
        <router-view/>
    </div>
</template>
<script>
export default {
     
     
    name: 'musicnav',
    data() {
     
     
        return {
     
     
        }
    },
}
</script>
<style>
    ul.songlist{
     
     
        padding: 10px;
    }
    li.song {
     
     
        list-style: none;
    }
    li.song div.poster {
     
     
        clear: both;
        float: left;
        margin-right: 10px;
    }
    li.song img {
     
     
        width: 40px;
        height: 40px;
    }