vue 路由跳转 + 过渡效果

1）路由切换的左进右退过渡效果
http://cnodejs.org/topic/58c792e6688280847800139d https://github.com/zhengguorong/pageAinimate
1.复制PageTransittion.vue到项目目录。

<template>
	<div>
	<div class="header"></div>
	<transition :name="transitionName">
	<router-view class="child-view"></router-view>
	</transition>
	</div>
	</template>
	<script>
	exportdefault {
	data () {
	return {
	transitionName:'slide-left'
	}
	},
	beforeRouteUpdate (to,from,next) {
	let isBack=this.$router.isBack
	if (isBack) {
	this.transitionName='slide-right'
	} else {
	this.transitionName='slide-left'
	}
	this.$router.isBack=false
	next()
	}
	}
	</script>
	<stylescoped>
	.child-view {
	position:absolute;
	width:100%;
	transition:all.8scubic-bezier(.55,0,.1,1);
	}
	.slide-left-enter,.slide-right-leave-active {
	opacity:0;
	-webkit-transform:translate(50px,0);
	transform:translate(50px,0);
	}
	.slide-left-leave-active,.slide-right-enter {
	opacity:0;
	-webkit-transform:translate(-50px,0);
	transform:translate(-50px,0);
	}
	.header {
	position:absolute;
	height:44px;
	background:#0058f1;
	width:100%
	}
	</style>

2.修改router配置。

Router.prototype.goBack = function () {
this.isBack = true
window.history.go(-1)
}
const router = new Router({
routes: [
{
path: '/',
name: 'PageTransition',
component: PageTransition, // 引入页面切换组件
children: [{
path: '',
component: Index  // 父路由访问页面，例如，访问www.aaa.com/ 显示的是Index组件
}, {
path: '/pageA',
component: PageA  // 子路由组件  例如，访问www.aaa.com/pageA 显示为PageA
}, {
path: '/pageB',
component: PageB // 子路由组件  例如，访问www.aaa.com/pageB 显示为PageB
}]
}
]
})

3、在每个组件页面中：

将    $router.go(-1)

改为  $router.goBack()

2）vue单页面，多路由，前进刷新，后退不刷新
https://segmentfault.com/a/1190000012083511?_ea=2917471

利用keep-alive 缓存需要缓存的页面

在app.vue中改写router-view

<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 page1,page2 -->
</router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 page3 -->
</router-view>

在router/index.js中添加路由元信息，设置需要缓存的页面 

在router/index.js的meta中添加isBack变量，默认false

{
path: '/page1',
name: 'page1',
component: page1,
meta: {
keepAlive: true, //此组件需要被缓存
isBack:false, //用于判断上一个页面是哪个
}
},
{
path: '/page2',
name: 'page2',
component: page2,
meta: {
keepAlive: true, // 此组件需要被缓存
isBack:false, //用于判断上一个页面是哪个
}
},

beforeRouteEnter中判断是从哪个页面过来的

判断是从哪个路由过来的，如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可

beforeRouteEnter(to, from, next) {
// 路由导航钩子，此时还不能获取组件实例 `this`，所以无法在data中定义变量（利用vm除外）
// 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html // 所以，利用路由元信息中的meta字段设置变量，方便在各个位置获取。这就是为什么在meta中定义isBack
// 参考 https://router.vuejs.org/zh-cn/advanced/meta.html if(from.name=='page2'){
to.meta.isBack=true;
//判断是从哪个路由过来的，
//如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
}

next();
},

activated中执行getData这个获取数据的方法

因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据。

activated() {
if(!this.$route.meta.isBack){
// 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
this.getData();
}
// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
this.$route.meta.isBack=false

},

第一次进入page1，能获取新数据，从page2返回时，不再获取新数据了，而是使用之前缓存的数据。但这样还有一个问题，当用户从page1进入page2后，因为某种原因，手动刷新了page2的页面。这时再返回到page1，发现之前缓存的数据丢失了

data中定义变量isFirstEnter用来判断是否第一次进入，或是否刷新了页面，默认false

data() {
return {
msg: "我是第一个页面",
str: "",  // 加载页面后执行获取数据的方法，插入到此
isFirstEnter:false // 是否第一次进入，默认false
};
},

created中把isFirstEnter变为true，说明是第一次进入或刷新了页面

created() {
this.isFirstEnter=true;
// 只有第一次进入或者刷新页面后才会执行此钩子函数
// 使用keep-alive后（2+次）进入不会再执行此钩子函数
},

activated中增加判断条件

activated() {
if(!this.$route.meta.isBack || this.isFirstEnter){
// 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
// 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
this.str=''// 把数据清空，可以稍微避免让用户看到之前缓存的数据
this.getData();
}
// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
this.$route.meta.isBack=false
// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
this.isFirstEnter=false;

},

滚动条可能是之前的高度，可能不会在顶部。

解决方法一

每次离开记录滚动条的高度，再次进入时根据项目需要再恢复之前的高度，或者置顶。

解决方法二（推荐）

router/index.js中添加如下代码（如不理解，请看参考链接）

参考：HTML5 History 模式　　　　　滚动行为

mode: 'history',
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}