vue从入门到精通之进阶篇（一）vue-router：导航守卫

loading…

{{error}}

{{post.title}}

{{post.body}}

`,

created(){

// 组件创建完成后获取数据

// 此时data已经被监听了

this.fetchData();

},

watch:{

‘$route’:‘fetchData’

},

methods:{

fetchData(){

this.error = null;

this.post = null;

this.loading = true;

this.$axios.get(‘http://127.0.0.1:8888/post’)

.then(res=>{

this.loading = false;

console.log(res.data);

this.post = res.data;

})

.catch(err=>{

this.err = err.toString();

})

}

}

}

var router = new VueRouter({

routes:[

{

path:‘/index’,

name:‘index’,

component:Index

},

{

path:‘/post’,

name:‘post’,

component:Post

}

]

});

var App = {

template:`

首页

我的博客

`

};

Vue.prototype.$axios = axios;

new Vue({

el:“#app”,

data:{

},

components:{

App

},

template:<App />,

router

});

vue-router的导航守卫之导航完成之前获取数据

需求：在导航完成之前获取数据，之后再渲染DOM