說說如何使用 vue-router 實現頁面跳轉

vue-router 有兩種實現頁面跳轉的方法。

1 <router-link> 元件

<template>
    <div>
        <h3>首頁</h3>
        <router-link to="/about">關於我們</router-link>
    </div>
</template>
複製程式碼

效果：

渲染後的程式碼：

可以看出， <router-link> 元件會被渲染成 <a> 標籤。

<router-link> 元件有以下這些屬性：

屬性	說明
to	需要跳轉的路徑。當然，我們也可以使用 v-bind 來實現類似功能。
tag	指定渲染成什麼標籤，預設渲染為 <a> 標籤。
replace	使用替換模式，所以不會留下 History 記錄。
active-class	當 <router-link> 與當前所對應的路由一致時，就會自動給當前元素設定一個名為 router-link-active 的 class。設定這一屬性，可以修改預設的 class 名稱（ router-link-active ）。設計導航欄時，可以利用該屬性，實現高亮顯示當前頁面對應的導航選單項 。

2 router 例項

有些場景，如果在 JavaScript 中實現頁面跳轉，這時就可以使用 router 例項來實現：

<template>
    <div>
        <h3>簡介</h3>
        <button @click="clickByRouter">點選跳轉</button>
    </div>
</template>

<script>
    export default {
        name: "about",
        methods:{
            clickByRouter(){
                this.$router.push('/article/321')
            }
        }
    }
</script>
複製程式碼

效果：

$router 還定義了以下方法：

方法	說明
replace	類似 <router-link> 元件的 replace 屬性功能。
go	類似 window.history.go()，即可以在瀏覽器的歷史記錄中向前（正數）或向後（負數）多少步。