vue cli3 路由不變的情況下,重新整理頁面

2021-10-02 07:28:43 字數 768 閱讀 9002

在vue寫的後台管理專案中,經常會有增、刪、改、查的操作,這些操作只是跟用介面跟後台互動下,既然用接**互,那肯定就是axios的非同步請求,那麼就是說後台資料發生了改變,但是前台的資料並沒有實時的更新(每次操作完後台把列表資料重新返給你例外,但是這樣的話每次互動的資料量就偏大了),所以就有了動態路由。在使用動態路由配置/detail/:id這樣的情況下,由於router-view是復用的,單純的改變id的值並不會重新整理router-view所以就要想乙個辦法,讓後台執行完操作後,給前台返乙個操作結果,然後前台手動重新整理頁面,一開始我想到的是用window.location.reload()或者this.$router.go(0)這兩個方法,但是後來發現這兩個方法消耗都很大,使用者體驗並不太好,違背了vuerouter的初衷,所以就放棄了。看了下別人的做法,整理下面兩種方法:

用乙個空白元件在每次操作之後進行跳轉,相當於nginx反向**一樣。意思就是讓每次操作完成以後,都讓路由跳轉到這個中轉站頁面,然後這個頁面獲取到進來路由的路徑再返回去就可以了。這種方式如果說你的路由是顯性的,就是直接顯示在瀏覽器位址列,你會發現,一直在換,而我目前使用的則是第二種方式。

在需要呼叫的子頁面:

當然也可以去我的部落格夢想小筑與我交流。

vue cli3路由vue router用法

npm install vue router main.js檔案內 匯入vue router import vue from vue vue router是以來vue的 import vuerouter from vue router 匯入vue router,注意import vuerouter ...

vuecli3路由傳參的方式

路由傳參的三種方式 1,params方式傳參 想要使用params傳參首先要配置路由 這個是配置子元件 父元件中 to about id params方式傳參router link 子元件中接受呼叫父元件傳給的資料 使用this.route.id 就可以獲取到傳給的引數了 params傳參方式收到的...

路由不變的情況下,重新整理頁面

在vue寫的後台管理專案中,經常會有增 刪 改 查的操作,這些操作只是跟用介面跟後台互動下 既然用接 互,那肯定就是axios的非同步請求,那麼就是說後台資料發生了改變,但是前台的資料並沒有實時的更新 每次操作完後台把列表資料重新返給你例外,但是這樣的話每次互動的資料量就偏大了 所以就要想乙個辦法,...