router-link

to 函數

指定導向，包含以下方法

<!-- 直接指定路徑 -->
<router-link to="/">首頁</router-link>
<!-- 與v-bind綁定 -->
<router-link :to="'/'">首頁</router-link>
<!-- 與v-bind綁定，並指定path -->
<router-link :to="{path: '/'}">首頁</router-link>
<!-- 具名路由並帶入參數, /shop/1 -->
<router-link :to="{name: 'shop', params: {id: 1}}">Shop</router-link>
<!-- 具名路由並帶入query參數, /shop?id=1 -->
<router-link :to="{name: 'shop', query: {id: 1}}">Shop</router-link>

replace 函數

取代預設的push函數進行導頁，不留下瀏覽紀錄(無法使用上下頁)

<router-link to="/" replace>首頁</router-link>

push & replace 導頁

用於觸發後導頁ex: function中

// 指定字串
this.$router.push('/home');
// 指定path
this.$router.replace({path: '/home'});
// 具名路由
this.$router.push({name: 'home'});
// params
this.$router.replace({name: 'home', params: {id: '1'}});
// query
this.$router.push({name: 'home', query: {id: '1'}});

go函數

// 下一頁
this.$router.go(1);
// 前一頁
this.$router.go(-1);

導航守衛(Navigation Guards)

顧名思義極為在觸發路由時進行管理，其中分為全域、路由、元件。

beforeEach 全域前置守衛

所有路由動作前，都會經過此，全域守衛獨立定義於路由外。

to: 即將進入的對象。
from: 離開的對象。
next: 依賴的callback function，必需存在。

• next(true) -> 執行
• next(false) -> 不執行
• next('xxx') -> 轉至其他路由
• next(error) -> 終止，並傳至router.onError()

實作於route.js

// 若未登入，且不前往登入 -> 導向登入頁
router.beforeEach((to, from, next) => {
    if (to.name !== 'Login' && !isAuth) next({ name: 'Login' })
    else next()
  })

beforeResolve 全域解析守衛

用法與beforeEach大致相同，差異於元件守衛、非同步路由原件解析完，才進行調用。

afterEach 全域後置鉤子

跳轉完觸發，無next參數，不影響跳轉，但可透過failure參數驗證路由跳轉是否成功。

beforeEnter 路由守衛

與上述的差異在於此為路由獨享，並定義於路由中。

routes: [
    {
        name: 'shop',
        path: "/shop/:id", // 帶入參數 id
        component: () => import('../views/Shop.vue'),
        beforeEnter: (to, from, next) => {
            // ...
        }
    },
]

元件守衛

定義於元件中，類似於組件生命週期。

beforeRouteEnter
進入元件期前，提供to、from、next，但因為元件未建立，無法訪問this。
唯一支持next傳遞回調。

// 元件未建立，無法訪問this
beforeRouteEnter(to, from, next) {
    if (to === 'xxx') next()
    else if (from === 'xxx')  next()
    else  next(false)
},

beforeRouteUpdate
路由改變前，此處改變為複用的改變，例如同元件但所帶參數改變(/shop/1 -> /shop/2)

// 可訪問this
  beforeRouteEnter(to, from, next) {
    // ...
},

beforeRouteLeave
離開元件時調用，常用於禁止或提示是否離開(表單填寫未完全)。

// this.done: 是否填寫完成
beforeRouteLeave(to, from, next) {
    if (this.done) next(false) // 不進行換頁
    else next()
},

router終於結束了

有錯誤請不吝指教!
參考資料
https://vuejs.org/v2/guide
https://book.vue.tw/CH4/4-1-vue-router-intro.html
感謝各路大神