vue-router的导航守卫之在导航完成后获取数据
2020-09-09 本文已影响0人
_西风凋碧树
需求：在导航完成之后加载数据。渲染DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript" src="axios.js"></script>
<script type="text/javascript">
// 导航完成后获取数据，这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。
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 v-if="error" class = '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.err = 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",
data:{
},
components:{
App
},
template:`<App />`,
router
});
</script>
</body>
</html>
vue-router的导航守卫之导航完成之前获取数据
需求：在导航完成之前获取数据，之后再渲染DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript" src="axios.js"></script>
<script type="text/javascript">
// 导航完成后获取数据，这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。
var vm = null;
var User = {
data() {
return {
error: null,
user: ''
}
},
template: `
<div>
<div v-if="error" class = 'error'>
{{error}}
</div>
<div class = 'user' v-if = 'user'>
<h2>{{user}}</h2>
</div>
</div>
`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
console.log(to);
axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
.then(res => {
next(vm => vm.setData(res.data))
})
.catch(err => {
console.log(err);
next(vm => vm.setError(err));
})
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
this.user = null;
this.$axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
.then(res => {
this.setData(res.data);
next();
})
.catch(err => {
this.setError(err);
next();
})
},
methods: {
setData(user) {
this.$nextTick(() => {
this.user = user;
})
},
setError(err) {
this.err = err.toString();
}
}
}
var router = new VueRouter({
routes: [{
path: '/user/:id',
name: 'user',
component: User,
}]
});
var App = {
template: `
<div>
<router-link :to = "{name:'user',params:{id:1}}">我的用户1</router-link>
<router-link :to = "{name:'user',params:{id:2}}">我的用户2</router-link>
<router-view></router-view>
</div>
`
};
Vue.prototype.$axios = axios;
vm = new Vue({
el: "#app",
data: {
},
components: {
App
},
template: `<App />`,
router
});
</script>
</body>
</html>
