書圈 - 精通Vue.js系列 │ 路由導航中抓取數據－鑽石舞台

當用戶在瀏覽器端進行路由導航時，有些目標路由的組件需要從服務器端抓取數據，再把這些數據顯示到網頁上。抓取數據有以下兩種方式。

（1）導航後抓取：在導航完成後，在目標路由的組件的生命周期函數中抓取數據。在抓取的過程中，可以在網頁上顯示「正在加載中...」的提示信息。

（2）導航前抓取：先在導航守衛函數beforeRouteEnter()和beforeRouteUpdate()中抓取數據，接下來再進行導航。

以上兩種方式都能完成抓取任務，到底選用哪一種，取決於開發人員的喜好及開發團隊的要求。

導航後抓取

例程1定義了ItemPostFetch組件，在它的created()鈎子函數中，調用$watch()函數監聽$route.params變量，如果該變量發生更新，就會執行fetchData()方法。該$watch()函數的第三個參數{ immediate: true }確保在ItemPostFetch組件的初始化階段也會執行一次fetchData()方法。

fetchData()方法負責抓取數據，在實際應用中，會通過Ajax請求到服務器端抓取數據，本方法做了簡化，通過setTimeOut()函數模擬耗時的抓取數據的行為。

■ 例程1 ItemPostFetch.vue

<template><div><divv-if="isLoading">商品數據加載中...</div><divv-if="isError">商品數據加載失敗</div><divv-if="isReady"><p>商品ID: {{item.id}}</p><p>商品名字: {{item.title }} </p><p>商品描述: {{item.desc}}</p></div></div></template><script>importItems from'@/assets/items'//引入Item數據exportdefault{data() {return{item: {},isLoading: false, isReady: null,isError: null}},created() {//監聽$route.params，如果發生更新，就調用fetchData()方法this.$watch(()=>this.$route.params,() => {this.fetchData()},//確保在初始化組件時也調用一次fetchData()方法{ immediate: true} )},methods: {fetchData() {this.isReady = nullthis.isError=nullthis.isLoading = true//模擬耗時的抓取數據行為，在實際應用中會到服務器端抓取數據setTimeout(()=>{this.item=Items.find((item)=>item.id==this.$route.params.id) if(this.item){ //如果存在與id匹配的商品數據，就顯示商品數據 this.isLoading=falsethis.isReady=true}else{ //如果不存在與id匹配的商品數據，就顯示錯誤信息 this.isLoading=falsethis.isError=true}},2000) //延遲2秒後執行數據抓取 }}}</script>

在index.js中，為ItemPostFetch組件設置如下路由：

{path: '/postfetch/:id',component: ItemPostFetch}

通過瀏覽器訪問http://localhost:8080/#/postfetch/1，會看到網頁上首先顯示「商品數據加載中...」，接下來再顯示id為1的商品信息。

通過瀏覽器訪問http://localhost:8080/#/postfetch/5，會看到網頁上首先顯示「商品數據加載中...」，接下來再顯示「商品數據加載失敗」。

導航前抓取

在例程2定義了ItemPreFetch組件。在beforeRouteEnter()和beforeRouteUpdate()導航守衛函數中都會通過fetchData()函數抓取數據。fetchData()是一個獨立的函數，不屬於ItemPreFetch組件。fetchData()函數有一個作為回調函數的callback參數，當抓取數據完畢後，callback回調函數會把item變量和isError變量賦值給ItemPreFetch組件的item變量和isError變量。

由於在beforeRouteEnter()函數中不能通過this關鍵字訪問ItemPreFetch組件，因此通過next()函數來為ItemPreFetch組件的item變量和isError變量賦值。

■ 例程2 ItemPreFetch.vue

<template><div><divv-if="isError">商品數據加載失敗</div><divv-if="! isError"><p>商品ID: {{item.id}}</p><p>商品名字: {{item.title }} </p><p>商品描述: {{item.desc}}</p></div></div></template><script>importItems from'@/assets/items'//引入Item數據functionfetchData(id,callback) {letisError=nullletitem=null//模擬耗時的抓取數據行為，在實際應用中會到服務器端抓取數據setTimeout(()=>{item=Items.find((item)=>item.id==id) if(item){ isError=false}else{ isError=true}callback(item,isError)},2000) //延遲2秒後執行數據抓取 }exportdefault{data() {return{item: {},isError: null}},beforeRouteEnter(to, from, next) {fetchData(to.params.id,(item, isError) => {next(vm=>{vm.item=itemvm.isError=isError })})},beforeRouteUpdate(to) {fetchData(to.params.id,(item, isError) => {this.item=itemthis.isError=isError})}}</script>

beforeRouteEnter()函數如果不使用next參數，還可以改寫為：

beforeRouteEnter(to) {fetchData(to.params.id,(item, isError) => {returnvm=> { vm.item=itemvm.isError=isError } })}

在index.js中，為ItemPreFetch組件設置如下路由：

{path: '/prefetch/:id',component: ItemPreFetch}

通過瀏覽器訪問http://localhost:8080/#/prefetch/1，會看到網頁首先停留在原來的頁面，接下來再顯示id為1的商品信息。

通過瀏覽器訪問http://localhost:8080/#/prefetch/5，會看到網頁首先停留在原來的頁面，接下來再顯示「商品數據加載失敗」。

參考書籍