溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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.push轉場動畫
<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 轉場動畫示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
