示例 (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没
