一.效果展示
二.知识点总结
1.从歌手界面跳转到歌手详情界面:
首先配置路由:
{
path:'/singer',
component:Singer,
children:[
{
path:':id',
component:SingerDetail
}
]
},
之后,在singer.vue中挂载子路由
<router-view></router-view>
由于需求是点击列表进行跳转,因此在列表所在的组件中添加对列表的点击事件
<li @click="selectItem(item)" ></ li >
selectItem(item) {
this.$emit('select', item)
},
注:由于list.vue是基础组件,因此不会构建业务逻辑,只负责把事件派发出去即可。
在singer中监听实例
<listview @select="selectSinger" :data="singers"></listview>
实现:
selectSinger(singer){
this.$router.push({
path:`/singer/${singer.id}`
})
this.setSinger(singer)
},
2.transform标签
转场动画:在singer.vue中
<transition name="slide">
<music-list :songs="songs" :title="title" :bg-image="bgImage">
</music-list>
</transition>
.slide-enter-active, .slide-leave-active
transition:all 0.3s
.slide-enter, .slide-leave-to
transform:translate3d(100%,0,0)
3.VueX
在跳转的过程中,需要像详情页传入歌手的信息。这就需要使用Vuex, 也是本节的重点。
Vuex是一个专为Vue.js应用程序开发的状态模式。它采用集中式存储管理应用的所有组件的状态,并以规则保证状态以一种可预测的方式发生变化。
state.js
const state={
singer:{}
}
export default state
mutation-type.js
export const SET_SINGER = 'SET_SINGER'
mutation.js
import * as types from './mutation-type'
const matutaions = {
[types.SET_SINGER] (state,singer){
state.singer=singer
}
}
export default matutaions
getters.js
export const singer=state => state.singer
index.js
import Vuex from "vuex"
import Vue from 'vue'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug=process.env.NODE_ENV !=='production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict:debug,
plugins:debug?[createLogger()]:[]
})
action.js//异步操作,或对mutations进行封装
在main.js中
import store from './store'
new Vue({
el: '#app',
render:h=>h(App),
store,
router
})
以上,VUEX配置完毕
在singer.vue中,利用VUEX提供的语法糖,更加方便。
import {mapMutations} from 'vuex'
在methods中
...mapMutations({
setSinger:'SET_SINGER'//对象映射
}),
selectSinger(singer){
this.$router.push({
path:`/singer/${singer.id}`
})
this.setSinger(singer)//传入singer,实现对与singer的提交
},
在singer-detail中
import {mapGetters} from 'vuex'
export default{
computed:{
...mapGetters([
'singer'//拿到sing
])
},
调用:this.singer
4.回退
this.$router.back()