路由方法介紹

首先新建立一個 routerNavigation 的元件。

<template>
  <button type="button" @click="getRoute">getRoute</button>

  <button type="button" @click="push">Push</button>
  <button type="button" @click="replace">Replace</button>
  <button type="button" @click="go">Go</button>
  <hr />
  <button type="button" @click="addRoute">新增路由</button>
</template>

<script>
export default {
  methods: {
    // 包含歷史紀錄
    push () {
      this.$router.push({
        name: 'About'
      })
    },
    // 沒有歷史紀錄
    replace () {
      this.$router.replace({ name: 'About' })
    },
    // 操作歷史紀錄
    go () {
      this.$router.go(-1)
    },
    // 取得常用餐數
    getRoute () {
      // 取得路由的屬性
      // https://next.router.vuejs.org/zh/api/#routelocationnormalized
      // 範例：this.$route.fullPath (目前網址)
      console.log(this.$route)
      // 呼叫路由的方法
      // 參考：https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95
      // 範例：this.$router.go(-1) (回到前一頁)
      // console.log(this.$router);
    },
    // 延伸介紹 : 新增路由
    addRoute () {
       this.$router.addRoute({
        path: '/newAbout',
        name: 'newAbout',
        component: () => import('../views/AboutView.vue')
      })
    }
  }
}
</script>

取得路由的屬性

參考資料 : RouteLocationNormalized

可以取得當前路由所可以提供的相關資訊

console.log(this.$route)

//範例：this.$route.fullPath (目前網址)

呼叫路由的方法

參考資料 : Router 方法

console.log(this.$router);

// 範例：this.$router.go(-1) (回到前一頁)

push 和 replace 都是可以切換頁面的方法。
go 可以拿來做上一頁、下一頁的功能。[color=green]

 // 包含歷史紀錄
    push () {
      this.$router.push({
        name: 'About'
      })
    },
    // 不會產生歷史紀錄
    replace () {
      this.$router.replace({ name: 'About' })
    },
    // 操作歷史紀錄
    go () {
      this.$router.go(-1)
    },

預設路徑以及重新導向

當我們輸入錯誤路徑時，怎麼做一個404頁面與重新導向呢?

首先，建立一個 404 not found的元件，並透過路由表指向它。

<template>
    <h1>404</h1>
    <p>這頁找不到囉~</p>
</template>

 // 404頁面
  {
    path: '/:pathMatch(.*)*',
    component: () => import('../views/NotFound.vue')
  },
  // 重新導向
  {
    path: '/newpage/:pathMatch(.*)*',
    redirect: {
      name: 'home'
    }
  }

路由設定選項

linkActiveClass

參考資料 : Vue linkActiveClass

在路由設定中加入 linkActiveClass : 'active'( bootstrap 樣式)，就可以讓選項變成啟用中的樣式。

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active'
})

scrollBehavior

參考資料 : Vue scrollBehavior

scrollBehavior 可以控制 savedPosition 決定網頁畫面的滾動位置

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active',
  scrollBehavior (to, from, savedPosition) {
      // `to` 和 `from` 都是路由地址
      // `savedPosition` 可以為空，如果沒有的話。
    console.log(to, from, savedPosition)
      
    // 判斷如果是newpage頁，就會置頂
    if (to.fullpath.match('newpage')) {
      return {
        top: 0
      }
    }
  }  
})