學習vue的時候遇到了一個路由的問題.首先自己剛開始學,確實太菜了…
這個問題就是使用this.$router.push添加了跳轉的路由地址,router那邊也添加了跳轉的vue組件,結果點擊這個按鈕沒有發生跳轉,但是地址欄的地址已經發生了變化,再次點擊按鈕的時候會報錯:
這個錯誤是因爲不能跳轉當前地址.
然後是我在網上看到很多人用了一個改寫路由的push方法:
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return routerPush.call(this, location).catch(error => error)
}
這個方法在我這裏沒有發生作用…
然後我又在網上尋求幫助,遇到一位大佬,他告訴我說:
1.首先，你要記得在父容器裏使用 router-view
2.其次，鏈接應該用 router-link
3.鏈接應儘量用名稱，不要用實際路徑，方便維護
4.所以這裏你應該寫成 router-link(:to="{name: ‘member.new’}")
5.報錯本身是正常的
然後我才意識到我沒有使用router-view,我又問了一下,確實這個是必須要有的.
最後我加上router-view之後還是沒有成功,於是我又按照之前在網上看到的一個方式:
1.給router-view 添加一個name屬性
2.再路由中把component屬性改爲components,多了一個s
3.components屬性是一個對象裏面需要有一個屬性,屬性名就是上面router-view 中添加的name的值,然後屬性值就指向要跳轉的vue組件
到這裏就把問題解決了,至於爲什麼要把component改成components,其實我也不知道…