利用vue-router改善数据获取

有时候我们会对用户有个性化设置，比如在A页面用户可以选择性的展示若干个模块，是否展示的判断标准存在数据库，因此路由到这个页面时需要调用接口获取数据判断到底是哪些模块要显示，哪些是不需要显示的

正常情况下在路由导航到此页面创建完成时调用接口获取数据会有不好的用户体验，此时会有页面抖动现象

<template>
	<div class="text">
		<span v-if="show1">Hello</span>
		<span v-if="show2">World!</span>
	</div>
</template>

<script>
export default {
	name: 'Hello',
	cerated() {
		this.getData();		//获取数据
	},
	data() {
		return {
			show1: true,
			show2: true
		}
	},
	methods: {
		getData() {
			axios('xxx').then((res) => {
				this.show1 = true;
				this.show2 = false;
			})
		}
	}
}

如上所示，默认都是true，在路由到此页面时调用接口还没成功这个时间段两个模块都会显示，在接口调用成功时show2置为false，这时会隐藏掉这个模块，但是显示与隐藏时间比较短，因此会出现抖动现象，虽然问题不大，但是会直接影响用户的视觉感受

针对以上问题，可行的解决办法为在这个页面渲染之前就调用接口获取数据，获取到