近期在升級 Buefy 的 Vue2 專案時,發現 Button 按鈕的跳頁 tag 標籤失效,這與 VueRouter 升級到 v4 版本時,將 tag 屬性從 <router-link> 給移除有關。由於 Buefy 官網上並沒有提供相對應的搬遷指南,這邊筆記下解法。
內容
使用 router.push
引入 vue-router 的 useRouter() 方法,然後用原生的 @click 直接使用 push 即可,這最直接且好懂。
使用 router-link 的 custom 和 v-slot 包裝
這方法我嘗試後不管用,但為 Vue 官方 2 升 3 的教學
|
1 2 3 4 5 |
<router-link to="/about" custom v-slot="{ navigate }"> <span @click="navigate" @keypress.enter="navigate" role="link"> About Us </span> </router-link> |
參考資料
1. Vue Router 官方文件:從 Vue 2 遷移 – 移除 tag 屬性
按讚加入粉絲團
