Vue 初心者筆記 #34 透過自定義事件切換 Router
除了使用 <router-link>
建立連結來切換路由外,我們也能使用 Router 的一些自定義方法,直接通過 <a>
標籤來切換頁面路由。
STEP 1:改成 a 連結
我們把 <router-link>
改為 <a>
連結標籤,並使用 @click.prevent
綁上自訂的事件 updatePath
。
1 | <a href="#" class="nav-link" @click.prevent="updatePath">切換到指定頁面</a> |
並且把這個事件加到 methods
裡面:
1 | export default { |
STEP 2:自定義事件
Vue 官方文件中有提到許多”取代路徑”的方式,下方會一一做介紹。
不過以下的寫法會跟官方文件看到的不太一樣,因為我們是在 Vue CLI 內運行的,前方有先執行了 vue.use(...)
,因此外部資源會被掛載到 Vue 內。
所以我們就可以使用 this
來呼叫這些資源,而其他包含像是 router
與 axios
也都是這個概念。
router.push
這裡我們在 .push
後面加上 child2
這個分頁的路徑,按下去之後就會直接切換到這個指定的頁面了。
1 | methods: { |
有使用
Vue.use
的情況下,就可以使用this.$router
來運作!
router.back
.back
就是回到前一頁的功能,()
裡面不需要帶路徑。
1 | <a href="#" class="nav-link" @click.prevent="beforePath">回到前頁</a> |
1 | methods: { |
router.forward
.forward
的使用概念與 .back
相同,功能就是回到下一頁。
1 | methods: { |
router.go
.go
是基於目前的位置,可以往前或往後做切換。
例如:.go(-1)
即為往前上一頁,效果就與 .back()
相同。
1 | methods: { |
router.replace
最後這個 .replace
其實概念與 .push
有些類似。
我們剛才之所以可以回到前一頁,是因為瀏覽器會有紀錄,讓我們可以用 .back
或其他方式來切換到上一頁。
但是當我們使用 .replace
時,瀏覽器不會留下紀錄,它會直接取代目前的頁面。
白話來說,畫面上呈現的是別的頁面內容,但瀏覽器紀錄中,卻還在之前的頁面,像是沒切換過頁面似的。
1 | methods: { |
透過 .replace
切換頁面後,如果按下”上一頁”,對瀏覽器來說是回到上一頁,但對我們來說會是回到上上一頁的內容。
那麼以上這些就是透過 Method 來操作 Router 的方法了!
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。