资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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实现路由左右切换动画同时嵌套路由使用不同动画(兼听手机返回键或自写按钮)
当前地址:http://cdkjz.cn/article/ghgece.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220