跳至主要内容

[Vue Router] 當前位置及滾動行為

TL;DR​

Vue Router另外提供幾個功能。可以將目前所在的路由對應的RouterLink加上一個啟用狀態的CSS。另外也可以設定在切換路由時預設滾動的位置。

參考資料​

相關連結​

linkActiveCLass​

當前路由如果匹配時，會在RouterLink上加上所指定的Class名稱。

./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    ...
  ],
  linkActiveClass:'active',
})

export default router

tip

Bootstrap在啟用時預設對應的class是active

滾動行為​

可以在每次進入新路由時觸發。並根據不同的路由決定進入頁面時需要滾動的位置。

./src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    ...
  ],
  linkActiveClass: 'active',
  scrollBehavior(to, from, savedPosition) {
    console.log(to,from,savedPosition)
    // 進到newPage頁面時，會滾動到最上方
    if(to.fullPath.match('newPage')){
      return{
        top:0
      }
    }
    return{
      top:500
    }
  }
})

export default router