Vue路由傳參及路由參數變化后而頁面不刷新的解決


--7.23更新--

更完善及多樣的解決方法

 

路由傳參問題原文

路由參數變化但頁面不變化問題原文

 

仍然是readhub仿站項目,各路由的切換采用了Vue-router,由於實際上各個路由界面的結構是完全相同的,只是各路由對應的API域名不同(如/topic與/news),即獲取並填入的數據不同

因此在這里我就只准備了一個子組件(下圖的topic.vue,名字還沒改哈哈哈哈將就一下),通過v-for渲染出不同的路由入口

(App.vue)

 

渲染結果:

(准備等整個頁面搞定了再把正式名字填進去,這樣很有儀式感哈哈哈哈(●'◡'●))

 當點擊時調用routerChange()函數,手動(我感覺這個的確是手動的?)更改路由,注意是$route與$router區別

$router : 是路由操作對象,只寫對象 $route : 路由信息對象,只讀對象

路由的index.js文件要這樣寫:

上面那個是默認路由的設置,下面的name是瞎寫的

 

到這里就解決了今天的第一個問題,隨即而來的是下一個問題,即路由是跳轉了,但是頁面沒有變化,除非刷新一下

下意識地想在routerChange()里加一行reload(),但是立刻覺得太沒牌面了

查了一下原來這個問題還蠻多人遇到的,選了一個比較簡易但是實測可以使用的解決方法

在組件的vue文件中加入這些代碼

即監聽$route的變化,如果發生改變則修改當前實例的數據(在這里是detail),然后我用的是這種方式來渲染頁面

(暫時比較簡陋的界面,路由模式也還沒有改,所以有個丑丑的#)

 

接下來要解決的就是點擊鏈接后進入新聞詳情的問題了,我感覺這應該是個壓軸題?

本來這些應該是昨天的進展,無奈EDG被RNG0:2太影響情緒了...

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM