操作： 是時機函數，在頁面加載前，可以在這兩個函數里面做一些事情， 比如發送異步請求。 類似過濾器，或者攔截器。

1. axios安裝

安裝報錯，多裝幾遍，或者用cnpm安裝

npm install axios -s npm install --save vue-axios

2. 參數說明

// 兩個鉤子函數 過濾器 || 攔截器的環繞 // to 路由將要跳轉的路徑信息 // from 路徑跳轉前的路徑信息 // next 路由的控制參數 // next() 跳入下一個頁面 // next('/path') 改變路由的跳轉方向，跳到下一個頁面 // next(false) 返回原來的頁面 // next((vm) => {}) 盡在beforeRouteEnter 中可用，vm是組件實例 beforeRouteEnter: (to, from, next) => {console.log('進入路由之前');next() // 必寫 }, beforeRouteLeave: (to, from, next) => {console.log('進入路由之后')next() }

3. demo

<template><div>{{ info[1].hobby[0] }}{{ info[0].home }}</div> </template><script>export default {beforeRouteEnter: (to, from, next) => {console.log('進入路由前..')next((vm => {vm.getData()})) // 發送異步請求并放行},beforeRouteLeave: (to, from, next) => {console.log('進入路由后..')next()},data() {return ({info: [{name: null,home: null},{hobby: [null, null]}]})},methods: {getData: function() {/* ../../static/mock/data.json */this.axios.get('../../static/mock/data.json').then(response => (this.info = response.data))}}} </script><style scoped></style>

總結

以上是生活随笔為你收集整理的beforeRouteEnter，beforeRouteLeave函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。