sets the method in the instance. The main effect achieved in the method is
there are three routes on it. Click on a route to show Loading. first. Three seconds later, the content of the desired component will be displayed, but the setTimeout method is set in the setting method, but it does not work. Instead of showing the word loading first, it directly shows the content of the subcomponent. The code is as follows
<template>
<div>
<div>
<router-link to="/shuju/one">/shuju/one</router-link>
<router-link to="/shuju/two">/shuju/two</router-link>
<router-link to="/shuju/three">/shuju/three</router-link>
</div>
<div v-if="loading">Loading...</div>
<div v-if="post">
<router-view :page="post">
</router-view>
</div>
</div>
</template>
<script>
import Vue from "vue"
import VueRouter from "vue-router"
import After from "./after.vue"
Vue.use(VueRouter)
const router=new VueRouter({
routes:[
{
path:"/shuju/:id",
name:"shuju",
component:After,
props:true
}
]
})
export default{
name:"daohangafter",
data(){
return{
loading:false,
post:null
}
},
router,
watch:{
"$route":"fetchData"
},
methods:{
fetchData(){
let vm=this;
this.post=null;
this.loading=true;
setTimeout(getPost(vm.$route.params.id),3000)
function getPost(id){
console.log(id);
vm.loading=false;
if(id=="one"){
vm.post={title:"one",body:"one"}
}else if(id=="two"){
vm.post={title:"two",body:"two"}
}else{
vm.post={title:"three",body:"three"}
}
}
}
}
}
</script>the child component code is
<template>
<div>
<h3>{{page.title}}</h3>{{page.body}}
</div>
</template>
<script>
export default{
name:"after",
props:{page:Object}
}
</script>how can I display it in three seconds? How to implement setTimeout?