实战练习
在container/index.vue文件中 加入5个路由:主页面、歌手、榜单、我的、搜索
在container文件夹下添加: 主页面home.vue 歌手singer.vue 榜单listcate.vue 我的mine.vue 搜索search.vue
在文件router/index.js中配置
import * from "../*/*"
Vue.use(Router)
export default new Router({ routes: [ { path: '/', name: 'index', redirect:"/home",//重定向 component: Index, children:[ { path: 'home', name: 'home', component: Home },... ] } ]
在文件夹components下创建文件today_recommend.vue
导入组件的文件: import TodayRecommend from "../components/today_recommend" 使用: components:{ TodayRecommend } 引入:
1.配置config/index.js(例如:百度音乐) proxyTable: { "/baidu_music_api":{ target:"http://tingapi.ting.baidu.com", changeOrigin:true, pathRewrite:{ '^/baidu_music_api':'' } } }, 2.使用axios解决重定向问题 安装:cnpm install --save axios
1.在main.js中: import Axios from "axios" Vue.prototype.$axios = Axios;
1.在today_recommend.vue中:(注意参数问题) mounted(){ var url=this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6&offset=0" this.$axios.get(url) .then(res => { console.log(res.data) }) .catch(error => { this.todayRecommend=res.data.song_list; console.log(error) }) }
<div class="card url" v-for="(item,index) in todayRecommend" :key="index">
<div class="album">
<img :src="item.pic_big" :alt="item.title" />
<div class="">{{item.title}}</div>
</div>
</div>
使用swiper设置轮播图: 局部引用:https://github.com/surmon-china/vue-awesome-swiper import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { data(){ return{ swiperOption:{ pagination: { el: '.swiper-pagination', }, autoplay:true },
}
},
components: {
swiper,
swiperSlide
}
}
新建一个文件夹:musicList music_listnav.vue 在其中嵌套三级路由实现以下三个页面: hot_list.vue king_list.vue new_list.vue 传参: 三个页面样式一样所以在components中建一个组件: Music_list.vue 接受参数: props:{//参数 url:{ type:String, default:"" } }, 在home下配置路由:
避免数据重复请求:
在js中引本地入图片要用require("本地地址"),如果是网络地址就不需要