0
点赞
收藏
分享

微信扫一扫

vue路由动态过渡效果

小沙坨 2022-05-12 阅读 73

不多说,直接上代码

import Vue from 'vue' //引入vue
import VueRouter from 'vue-router' //引入路由

Vue.use(VueRouter) //使用路由
//定义Home组件
const Home = {
template: `
<div class="home">
<h2>Home</h2>
<p>hello</p>
</div>
`
}

const Parent = {
data () {
return {
transitionName: 'slide-left'
}
},
// 基于路由变化动态设置转换
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
},
template: `
<div class="parent">
<h2>Parent</h2>
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
`
}

const Default = { template: '<div class="default">default</div>' }
const Foo = { template: '<div class="foo">foo</div>' }
const Bar = { template: '<div class="bar">bar</div>' }
//定义路由路径
const router = new VueRouter({
mode: 'history',//历史模式
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/parent', component: Parent,
children: [
{ path: '', component: Default },
{ path: 'foo', component: Foo },
{ path: 'bar', component: Bar }
]
}
]
})

new Vue({
router,
template: `
<div id="app">
<h1>Transitions</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/parent">/parent</router-link></li>
<li><router-link to="/parent/foo">/parent/foo</router-link></li>
<li><router-link to="/parent/bar">/parent/bar</router-link></li>
</ul>
<transition name="fade" mode="out-in">
<router-view class="view"></router-view>
</transition>
</div>
`
}).$mount('#app')





举报

相关推荐

0 条评论