vue从入门到精通之进阶篇（一）vue-router：导航守卫
生活随笔
收集整理的這篇文章主要介紹了
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>總結
以上是生活随笔為你收集整理的vue从入门到精通之进阶篇（一）vue-router：导航守卫的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bootice 此功能仅在uefi环境下
- 下一篇： 用MySQL语言创建视图_mysql 创