Vue-router切换路由使用Transition达到过渡效果

router-view所在的组件代码

结构

<template>
  <div class="layout">
       <router-view v-slot="{ Component }">
      <Transition name="fade"> 
        <component :is="Component" ></component>
      </Transition>
    </router-view>
     </div>
</template>

过渡效果样式

//.fade
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
  • 12
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,可以非常方便地在单页应用中管理应用的路由。 在使用 Vue Router 进行路由管理时,我们需要用到它的一个重要组件 router-viewrouter-view 可以理解为路由的容器,用于显示当前路由对应的组件。 下面我们来详细介绍一下 router-view使用方式和相关属性。 ### 基本用法 在 Vue Router使用 router-view 很简单,只需要在需要展示路由组件的地方加上 <router-view></router-view> 标签即可。 例如,我们有一个路由配置如下: ```js const routes = [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] ``` 在需要展示路由组件的地方添加 <router-view></router-view> 标签: ```html <template> <div> <router-view></router-view> </div> </template> ``` 这样,当路由为 '/' 时,会显示 Home 组件;当路由为 '/about' 时,会显示 About 组件。 ### 嵌套路由 在 Vue Router 中,我们可以使用嵌套路由来实现复杂的路由配置。当我们需要在一个父路由下展示多个子路由时,可以使用嵌套路由。 例如,我们有一个父路由 '/user',下面有两个子路由 '/user/profile' 和 '/user/settings',路由配置如下: ```js const routes = [ { path: '/user', component: User, children: [ { path: 'profile', component: Profile }, { path: 'settings', component: Settings } ] } ] ``` 在 User 组件中,我们需要使用 router-view 来展示子路由对应的组件: ```html <template> <div> <h1>User Page</h1> <router-view></router-view> </div> </template> ``` 这样,当路由为 '/user/profile' 时,会显示 Profile 组件;当路由为 '/user/settings' 时,会显示 Settings 组件。 ### 路由命名视图 在某些情况下,我们需要在同一个页面中展示多个路由组件。此时,我们可以使用路由命名视图来实现。 路由命名视图是一种特殊的 router-view,它可以指定路由组件的渲染位置。 例如,我们有一个路由配置如下: ```js const routes = [ { path: '/', components: { default: Home, header: Header, footer: Footer } } ] ``` 这里我们通过 components 属性来指定每个路由命名视图对应的组件。default 表示默认的视图,也就是没有指定名字的视图。 在需要展示路由组件的地方,我们需要使用 router-view 的 name 属性来指定命名视图的名称: ```html <template> <div> <router-view name="header"></router-view> <router-view></router-view> <router-view name="footer"></router-view> </div> </template> ``` 这样,我们就可以在同一个页面中展示多个路由组件了。 ### 路由过渡动画 在 Vue Router 中,可以通过 transition 组件来给路由切换添加过渡动画。 首先,我们需要在 App.vue 中添加 transition 组件: ```html <template> <div> <transition name="fade"> <router-view></router-view> </transition> </div> </template> ``` 这里我们使用 name 属性来指定过渡动画的名称,fade 是一个自定义的名称。 接下来,我们需要在 CSS 中定义过渡动画: ```css .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } ``` 这里我们使用 opacity 属性来控制元素的透明度,当元素进入或离开时,会触发过渡动画。 至此,我们已经介绍了 router-view 的基本用法、嵌套路由路由命名视图和路由过渡动画。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值