鍍金池/ 問答/HTML/ vue router redirect有條件的重定向

vue router redirect有條件的重定向

最近學(xué)習(xí)vue框架,想使用vue-cli寫一個移動端的掃雷游戲當(dāng)做練習(xí).
使用了vue-router.

clipboard.png

clipboard.png

clipboard.png

clipboard.png

頁面層級為home->select->play,在select頁面選擇難度,有simple,normal,de...三種難度選擇.

點擊其中一個選項(暫時不管自定義)跳轉(zhuǎn)到play組件中.router-link中寫了params參數(shù),在最開始的時候在路由中沒有寫"/:level",到達play頁面時地址為:localhost:8080/play,可以獲得params中的參數(shù),但是當(dāng)我刷新后就沒有了

clipboard.png

這個不能忍啊,所以就在路由中加上了'/:level',地址欄中變成了:localhost:8080/play/simple,這個時候突然想搞點事情,手動在地址欄中輸入:localhost:8080/play,然后回車(端口不一致請忽略它),

clipboard.png

然后就變成了這個樣子,什么都沒有,這不是我期望的,play頁面只能以'/play/:level'的方式顯示,如果僅僅是'/play',我希望路由應(yīng)該重定向到/home去,為了達到這個目的,我參考了vue-router官網(wǎng)的方案:https://github.com/vuejs/vue-...

clipboard.png

沒有成功.

不知道是不是我對這個問題描述不對,查閱了很久的百度都沒有什么收獲.

期待您的解答,謝謝

回答
編輯回答
不討喜

大概是這個原因？

你沒有按F5（或者command + R）?

你打印下params看看？

2017年5月30日 08:29
編輯回答
不二心

大致明白了你說的是什么意思。。。

你看下router.beforeEach，應(yīng)該能解決你的問題，路由攔截用的

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
     // ...
})
2017年7月3日 23:25
編輯回答
朽鹿

這個應(yīng)該要在你的paly組件里面處理，有個進入路由組建的鉤子
beforeRouteEnter(to,from,next){

// 這里做判斷 這個函數(shù)還未加載你的路由組件

}
自己看看處理最好
具體的給個vur-router官網(wǎng)鏈接

2017年5月26日 01:59