SoFunction
Updated on 2025-04-04

vue-router Implementation method of obtaining data after navigation is completed

created: The instance has been created and is called after it has been created. In this step, the instance has completed the following configuration: data observation (data observer), properties and methods operations, and watch/event event callback. However, the mount phase has not begun and the $el attribute is currently invisible.

Use the created() function of the lifecycle to call the method after the component is created.

created(){
// Get data after component creation is completed// At this time the data has been monitored();
},
watch:{
'$route':'fetchData'
},
methods:{
fetchData(){
 = null;
 = null;
 = true;
this.$('http://127.0.0.1:8888/post')
       .then(res=>{
 = false;
();
 = ;
})
.catch(err=>{
 = ();
})
}
}

The complete code is as follows:

<div ><div>
    <!-- Get data after navigation is completed，Let us display during data acquisitionloading....state -->
    <script type="text/javascript" src="./"></script>
    <script type="text/javascript" src="./"></script>
    <script type="text/javascript" src="./"></script>
    <script type="text/javascript">

        var Index = {
            template:` 
                <div>I'm home page</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>{{}}</h2>
                        <p>{{}}</p>
                    </div>
                </div>
            `,
            created(){
                // Get data after component creation is completed                // At this time the data has been monitored                ();

            },
            watch:{
                '$route':'fetchData'
            },
            methods:{
                fetchData(){
                     = null;
                     = null;
                     = true;
                    this.$('http://127.0.0.1:8888/post')
                    .then(res=>{
                         = false;
                        ();
                         = ;
                    })
                    .catch(err=>{
                         = ();
                    })

                }
            }
        }

        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'}">front page</router-link>
                    <router-link :to = "{name:'post'}">My blog</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        .$axios = axios;

        new Vue({
            el:'#app',
            template:`<App/>`,
            components:{
                App
            },
            router
        });
    </script>

This is the article about obtaining data after the vue-router navigation is completed. For more related vue-router data content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!