vue-router?導航完成后獲取數(shù)據(jù)的實現(xiàn)方法

更新時間：2022年11月21日 09:53:21 作者：炒股淪為首負

這篇文章主要介紹了vue-router?導航完成后獲取數(shù)據(jù),通過使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法，本文結合實例代碼給大家講解的非常詳細需要的朋友可以參考下

created：實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。

使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法。

created(){
　　// 組件創(chuàng)建完成后獲取數(shù)據(jù)
　　// 此時data已經(jīng)被監(jiān)聽了
　　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>
    <!-- 導航完成后獲取數(shù)據(jù)，讓我們在數(shù)據(jù)獲取期間可以展示loading....狀態(tài) -->
    <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(){
                // 組件創(chuàng)建完成后獲取數(shù)據(jù)
                // 此時data已經(jīng)被監(jiān)聽了
                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 導航完成后獲取數(shù)據(jù)的文章就介紹到這了,更多相關vue-router 獲取數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: