vueジャンクションインターフェースpushを実現した動画の例
1.index.jsは、サブルーティングchildrenを配置する。
import Vue from 'vue'
import Router from 'vue-router'
import SingerDetail from 'components/singer-detail/singer-detail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/recommend'
},
{
path: '/singer',
component: Singer,
// , children
children: [
{
//:id id , ,
path: ':id',
component: SingerDetail
}
]
},
{
path: '/search',
component: Search,
children: [
{
path: ':id',
component: SingerDetail
}
]
}
]
})
1.Singer
<template>
<div class='singer'>
<list-view @select='selectSinger'></list-view>
// routeview
<router-view></router-view>
</div>
</template>
<script>
import listView from '../components/listview'
export default{
methods:{
selectSinger(singer){
//vue push
this.$router.push({
path:'/singer/'+singer.id
})
}
},
components:{
listView
}
}
</script>
<style>
.singer{
}
</style>
2.listview(singerサブコンポーネント)
<template>
<div class='listview'>
<ul>
<li @click='selectItem(item)'></li>
</ul>
</div>
</template>
<script>
export default{
methods:{
// ,
selectItem(item){
this.$emit('select',item);
}
}
}
</script>
<style>
.listview{
}
</style>
3.singerDetail
<template>
<transition name='slide'>
<div class='singer-detail'></div>
</transition>
</template>
<script>
</script>
<style>
.singer-detail{
position:fixed
z-index:100
top:0
left:0
right:0
bottom:0
background:lightgray
}
.slider-enter-active,.slider-leave-active{
transition: all 0.3s
}
.slider-enter,.slider-leave-to{
transform: translate3d(100%,0,0)
}
</style>
4.スライド動画
<transition name="slide">
<div class="chatdiv">
<div class="back" @click="backAction"></div>
<div class="cont"> </div>
</div>
</transition>
<style>
.slide-enter-active,.slide-leave-active{
transition: all 0.3s;
}
.slide-enter,.slide-leave-to{
transform: translate3d(100%,0,0);
}
</style>
以上のvueはジャンプインターフェースpushを実現しました。動画の例は小編集が皆さんに提供した内容の全部です。参考にしていただければと思います。どうぞよろしくお願いします。