transition 与 transition-group

官网

transition 实现页面切换效果

移动端 SPA 中，为了从动画上接近原生，经常会用到页面切换效果，实现的功能如下

header 内容可自定义，返回按钮，title名称，menu名称都可自定义
header 的title名称，页面是否keep-alive 一些配置选项 在route.js提前定义，路由页面的参数来源于 router.js 的配置文件。

Router.prototype.goBack = function() {
  this.isBack = true;
  window.history.go(-1);
};

Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: "/",
      component: Parent,
      meta: {
        keepAlive: true
      },
      children: [
        {
          path: "/",
          component: Navigation,
          meta: {
            name: "首页",
            keepAlive: true
          }
        },
        {
          path: "/pageA",
          component: PageA,
          meta: {
            name: "页面A",
            keepAlive: true
          }
        },
        {
          path: "/pageB",
          component: PageB,
          meta: {
            name: "页面B",
            keepAlive: false
          }
        }
      ]
    }
  ]
});

页面切换动画不需要太多
有若干个父路由，其中有一个父路由下有若干个子路由（假设其他父路由没有子路由），该父路由的某一个子路由作为导航使用，用于控制跳转该父路由的其他子路由，来实现以下页面结构

- 体育
      - 导航
            - NBA
            - CBA
- 娱乐
- 财经

gif

代码地址

transition 实现组件的淡入淡出

推荐看这篇

实现效果