亲宝软件园·资讯

展开

vue-router 导航完成后获取数据的实现方法

炒股沦为首负 人气:0

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>

加载全部内容

相关教程
猜你喜欢
用户评论