vue-router 导航完成后获取数据的实现方法
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 获取数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
对Vue- 动态元素属性及v-bind和v-model的区别详解
今天小编就为大家分享一篇对Vue- 动态元素属性及v-bind和v-model的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08vue使用vue-json-viewer展示JSON数据的详细步骤
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,下面这篇文章主要给大家介绍了vue使用vue-json-viewer展示JSON数据的相关资料,需要的朋友可以参考下2022-09-09vue中provide和inject的用法及说明(vue组件爷孙传值)
这篇文章主要介绍了vue中provide和inject的用法及说明(vue组件爷孙传值),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route
this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法,本文给大家介绍Vue中this.$router与this.$route的区别 及push()方法,感兴趣的朋友跟随小编一起看看吧2023-10-10
最新评论