vue實現跳轉接口push 轉場動畫示例
更新時間：2019年11月01日 10:56:40 作者：lvlemo
今天小編就為大家分享一篇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:{
//內部把點擊事件派發(fā)出去,告訴外部我被點擊
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">免費咨詢專業(yè)醫(yī)生在線解答</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 轉場動畫示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Springboot+Vue-Cropper實現頭像剪切上傳效果
這篇文章主要為大家詳細介紹了Springboot+Vue-Cropper實現頭像剪切上傳效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue data不可以使用箭頭函數問題，本文通過源碼解析給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue中?render?函數功能與原理,結合實例形式分析了vue中render函數的基本功能、原理及相關操作注意事項,需要的朋友可以參考下2023-06-06
Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。下面我們來簡單了解下吧2019-05-05
本文主要介紹了VUE3封裝一個Hook的實現示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
VUE2響應式原理使用Object.defineProperty缺點
這篇文章主要為大家介紹了VUE2響應式原理使用Object.defineProperty缺點示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
我們在會開發(fā)項目的同時,也應該了解一下項目是如何部署到服務器的,下面這篇文章主要給大家介紹了關于vue項目打包并部署到Linux服務器的相關資料,需要的朋友可以參考下2023-01-01
當我們談論或討論在?Vue?中創(chuàng)建用戶界面組件時,經常會提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應用這些組件時面臨的問題,以及為什么必須盡可能克服這些問題,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了聊聊Vue.js的template編譯的問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Pinia是Vue.js的輕量級狀態(tài)管理庫,比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下2022-04-04