dreamback / vue-route-transition Goto Github PK

View Code? Open in Web Editor NEW

99.0 1.0 36.0 2.13 MB

vue-router 路由动画 vue router transition animate slide

Home Page: https://dreamback.github.io/vue-route-transition/

License: MIT License

JavaScript 67.22% HTML 0.75% Vue 32.03%

vue-router-transition vue-router-slider vue-router-swipe vue-router-css3 vue-router-animate

vue-route-transition's Introduction

vue-route-transition

vue router 切换动画

特性

模拟前进后退动画
基于css3流畅动画
基于sessionStorage，页面刷新不影响路由记录
路由懒加载，返回可记录滚动条位置
前进后退的判断与路由路径规则无关
支持任意基于Vue的UI框架

demo

手机扫码

在线预览

说明

配套包含两个组件

vue-route-transition 负责动画
router-layout 负责页面排版。主要是解决transform动画，position:fixed异常问题

像往常一样使用

npm i vue-route-transition --save

main.js

import RouteTransition from 'vue-route-transition'
Vue.use(RouteTransition)

App.vue

<template>
  // keepAlive默认true，开启缓存可以记录滚动条位置
  // 同时支持路由配置meta:{keepAlive:false} 关闭某个页面缓存
  <vue-route-transition id="app" :keepAlive="true">
    
  </vue-route-transition>
</template>

页面，如果有吸附头部，或吸附底部元素的情况下才需要使用router-layout组件

<template>
  <router-layout>
    <header slot="header">
      头部导航
    </header>
    <div></div>
    <div></div>
    ...
    <footer slot="footer">
      <button>底部按钮</button>
    </footer>
  </router-layout>
</template>

如果存在子路由,需手动设置router-layout的id属性，滚动条定位作用。

<router-layout id="__index">
  <router-view></router-view>
  <van-tabbar slot="footer" :fixed="false" v-model="active">
    <van-tabbar-item to="/" icon="shop">标签</van-tabbar-item>
    <van-tabbar-item to="/tab" icon="chat">标签</van-tabbar-item>
    <van-tabbar-item to="/swipe" icon="records">标签</van-tabbar-item>
  </van-tabbar>
</router-layout>

github

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源。

vue-route-transition's People

Stargazers

Watchers

vue-route-transition's Issues

安装了不能用.vue一直说找不到模块

安装成功了, 在package.json中有存在的. 在node_modules中也存在文件夹,只是这个文件夹图标是快捷方式的图标.

然后我在main.js中使用这个就报错.
import RouteTransition from 'vue-route-transition'
Vue.use(RouteTransition)
提示这个模块不存在. 可能是和这个快捷方式图标有关.

设置没有支持缓存，只是记录了滚动的距离，keep-alive没有生效

[Vue warn]: Error in data(): "TypeError: Cannot read property 'length' of null"

按照文档配置运行报如下错误：
[Vue warn]: Error in data(): "TypeError: Cannot read property 'length' of null"

found in

---> at src/components/vue-route-transition/transition.vue
at src/App.vue

为什么将一个组件的keepAlive设置成false之后，没有设置的组件都不能缓存了

<template>
  <router-layout>
    <van-nav-bar slot="header" title="首页" />
    <van-cell-group>
      <van-cell title="评分" is-link value="Rate" :to="{ path: '/rate' }" />
    </van-cell-group>
    <p style="text-align: center; padding-top: 30px;">
      所有页面默认开启了缓存<br />请向下滚动
    </p>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
    <van-cell-group style="margin: 300px 0 300px;">
      <van-cell title="记录滚动条位置" is-link :to="{ path: '/rate' }" />
    </van-cell-group>
  </router-layout>
</template>

在home.vue里面加入一个list，每次都会重新生成这个list