vue-router 导航完成后获取数据的实现方法
作者：炒股沦为首负
这篇文章主要介绍了vue-router 导航完成后获取数据,通过使用生命周期的 created() 函数，在组件创建完成后调用该方法，本文结合实例代码给大家讲解的非常详细需要的朋友可以参考下
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
使用生命周期的 created() 函数，在组件创建完成后调用该方法。
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.error = err.toString();
})
}
}完整代码如下：
<div id="app"><div>
<!-- 导航完成后获取数据，让我们在数据获取期间可以展示loading....状态 -->
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./axios.js"></script>
<script type="text/javascript" src="./vue-router.js"></script>
<script type="text/javascript">
var Index = {
template:`
<div>我是首页</div>
`
};
var Post = {
data(){
return{
loading:false,
error:null,
post:null
}
},
template:`
<div>
<div class='loading' v-if='loading'>
loading...
</div>
<div class='error' v-if='error'>
{{error}}
</div>
<div class='content' v-if='post'>
<h2>{{post.title}}</h2>
<p>{{post.body}}</p>
</div>
</div>
`,
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.error = err.toString();
})
}
}
}
var router = new VueRouter({
routes:[
{
path:'/index',
name:'index',
component:Index
},
{
path:'/post',
name:'post',
component:Post
}
]
});
var App = {
template:`
<div>
<router-link :to = "{name:'index'}">首页</router-link>
<router-link :to = "{name:'post'}">我的博客</router-link>
<router-view></router-view>
</div>
`
};
Vue.prototype.$axios = axios;
new Vue({
el:'#app',
template:`<App/>`,
components:{
App
},
router
});
</script>到此这篇关于vue-router 导航完成后获取数据的文章就介绍到这了,更多相关vue-router 获取数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！