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

时间:2022-11-22 炒股沦为首负人气: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>

加载全部内容