--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太影響情緒了...