使用vue-router,Vue.js页面转换淡入淡出效果

Question

如何在vue-router定义的页面(组件)之间实现淡入淡出效果页面转换？

Answer 1

裹<router-view></router-view>带<transition name="fade"></transition>,并添加这些样式:

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}

详细的答案

假设您已使用vue-cli创建了应用程序,例如:

vue init webpack fadetransition
cd fadetransition
npm install

安装路由器:

npm i vue-router

如果您不使用vue-cli开发应用程序,请确保以标准方式添加vue路由器:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

您可以使用例如:https://unpkg.com/vue-router/dist/vue-router.js

CLI已为您创建了一个骨干应用程序,您可以将其添加到其中.

1)创建页面组件

在Vue中,组件(UI元素)可以嵌套.您可以使用常规Vue组件创建应用程序中的页面,该组件被视为该页面中其他组件的根目录.

转到src/并创建pages/目录.这些页面根组件(单个页面)将放在此目录中,而实际页面中使用的其他组件可以放在现成的components/目录中.

在已调用的文件src/pages/Page1.vue和src/pages/Page2.vue初学者中创建两个页面.他们的内容将是(分别编辑页码):

<template>
  <h1>Page 1</h1>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

2)设置路由

编辑生成的src/main.js添加所需的导入:

import VueRouter from 'vue-router'
import Page1 from './pages/Page1'
import Page2 from './pages/Page2'

添加全局路由器用法:

Vue.use(VueRouter)

添加路由器设置:

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 },
    { path: '/', redirect: '/page1' }
  ]
})

最后一条路径只是将初始路径重定向/到/page1.编辑应用启动:

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

整个src/main.js例子都在答案的最后.

3)添加路由器视图

路由是现在设置的,只是根据路由器丢失而呈现页面组件的位置.这是通过将完成<router-view></router-view>在模板的地方,你会希望把它放在src/App.vue的<template>标签.

整个src/App.vue例子都在答案的最后.

4)在页面组件之间添加淡入淡出过渡效果

<router-view></router-view>用<transition name="fade">元素包裹,例如:

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

Vue将在这里完成工作:它将创建并插入适当的CSS类,从通过效果的持续时间指定的名称开始,例如:.fade-enter-active.现在在App.vue的部分中定义效果:

<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

而已.如果您现在运行应用程序,例如使用npm run dev,它将自动显示具有淡入效果的第1页.如果您将URL重写为/ page2,它将使用淡出和淡入效果切换页面.

有关更多信息,请查看有关路由和转换的文档.

5)可选:添加页面链接.

您可以使用<router-link>组件添加指向特定页面的链接,例如:

<router-link to="/page1">Page 1</router-link>
<router-link to="/page2">Page 2</router-link>

这会自动为链接提供一个router-link-active类,以防它们处于活动状态,但如果您使用的是Bootstrap,则还可以指定自定义类:

<router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link>
<router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link>

文件供参考

SRC/main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'

import App from './App'
import Page1 from './pages/Page1'
import Page2 from './pages/Page2'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 },
    { path: '/', redirect: '/page1' }
  ]
})

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

SRC/App.vue:

<template>
  <div id="app">
    <router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link>
    <router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

SRC /页/ Page1.vue:

<template>
  <h1>Page 1</h1>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

SRC /页/ Page2.vue:

<template>
  <h1>Page 2</h1>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>