vuex实现路由左右切换动画同时嵌套路由使用不同动画（兼听手机返回键或自写按钮）

示例 (hash/ history) http://47.94.90.89/dist
一、安装vue-cli
1 下载安装node.js
2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源
3 cnpm install -g vue-cli 全局安装vue-cli 已安装则不用
4 vue init webpack Vue-Project 初始化vue项目使用webpack模板，项目名称（自带webpack）
5 cnpm install 初始化生成node_modules
6 npm run dev 上线打包则 npm run build
二、安装vuex
1 cnpm install vuex --save-dev
2 然后在 main.js 中引入
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)

创新互联建站从2013年开始，是专业互联网技术服务公司，拥有项目网站设计、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元乌什做网站,已为上家服务,为乌什各地企业和个人服务,联系电话:18982081108

三、安装完成后配置过度动画的class
1、app.vue中

slide-up或slide-right等随便定义 vue会自动补全-enter，-leave等。

四 、配置vuex （vuex目录新建store.js）
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    //父级初始使用动画
    animateName:'slide-left',
            //嵌套的初始使用动画
    animateNameChild:'slide-up',
  },
  mutations:{
    //用于修改vuex的值
    newAnimateName(state,val){
      state.animateName=val
    },
    newAnimateNameChild(state,val){
      state.animateNameChild=val
    }
  }
})
export default store

五、main.js中添加：


import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
Vue.config.productionTip = false

// 一、执行返回动画
window.addEventListener("popstate", function(e) {
  //popestate 用于监听浏览器url为返回或forward
  //isBack值 用于判断用户 是点击（页面链接跳转） 还是（点击浏览器返回键或点击返回按钮）
  sessionStorage.isBack = true
  //子动画 需放进这里
  store.commit('newAnimateNameChild', 'slide-down')
}, false);

//二、执行前进动画
router.beforeEach(function (to,form,next) {
  // 如果isBack为true时，证明是用户点击了回退，执行slide-right或者slide-down动画
 setTimeout(function () { //加延时使上面的popstate先走  哈希模式 则不需要加延时
    let isBack = eval(sessionStorage.isBack)
    if (isBack) {
      //        store.commit 更新vuex中的状态使用 好处是可追踪值变化
      //        更改父级路由使用的动画
      store.commit('newAnimateName', 'slide-right')
    }else{
      store.commit('newAnimateName', 'slide-left')
      store.commit('newAnimateNameChild', 'slide-up')
    }
    // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
    sessionStorage.isBack = false
    next()

  },0)
})

此时已经侦听浏览器，手机返回键 前进后退可以动画，同时自己写的按钮因为一般是执行router.go(-1) ，这样也会触发popstate 所以也可以执行动画。

还不知道哪里有bug没

分享名称：vuex实现路由左右切换动画同时嵌套路由使用不同动画（兼听手机返回键或自写按钮）
当前URL：http://shouzuofang.com/article/ghgece.html

网站建设知识

vuex实现路由左右切换动画同时嵌套路由使用不同动画（兼听手机返回键或自写按钮）

其他资讯