vue从入门到精通之进阶篇（一）vue-router：导航守卫

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 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>