透過 Vue.js，我們已經用元件組成了我們的應用。當加入 Vue Router 時，我們需要做的就是將我們的元件對應到路由上，讓 Vue Router 知道在哪裡渲染它們。 【相關推薦：vue.js影片教學】
使用router-link 元件進行導航，透過傳遞to 來指定連結。 <router-link> 將呈現一個帶有正確 href 屬性的 <a> 標籤。
官方範例：
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>這裡沒有使用常規的 a 標籤，而是使用一個自訂元件 router-link 來建立連結。這使得 Vue Router 可以在不重新載入頁面的情況下更改 URL，處理 URL 的產生以及編碼。
router-viewrouter-view 將顯示與 url 對應的元件。可以把它放在任何地方，以適應佈局。
除了使用<router-link> 建立a 標籤來定義導航鏈接，我們還可以藉助router 的實例方法，透過編寫程式碼來實現。
想要導覽到不同的 URL，可以使用 router.push 方法。這個方法會在 history 堆疊中新增一個新的記錄，所以，當使用者點擊瀏覽器後退按鈕時，會回到先前的 URL。
當點擊<router-link> 時，內部會呼叫這個方法，所以點擊<router-link :to="..."> 相當於呼叫router.push(...) ：
| #宣告式 | 程式 |
|---|---|
#<router-link :to="..."> | router.push(...) |
該方法的參數可以是字串路徑，或是描述位址的物件。
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })注意：如果提供了path，params 會被忽略
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user作用與router.push類似，不同的是，它在導航時不會向history 添加新記錄
| #聲明式 | 編程式 |
|---|---|
#<router-link :to="..." replace> | router.replace(...) |
也可以直接在傳遞給router.push 的routeLocation 中增加一個屬性replace: true ：
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })該方法採用整數作為參數，表示在歷史堆疊中前進或後退多少步，類似於window.history.go( n)。
// 向前移动一条记录 router.go(1) // 相当于 router.forward() // 返回一条记录 router.go(-1) // 相当于 router.back() // 前进 3 条记录 router.go(3) // 如果没有那么多记录，静默失败 router.go(-100) router.go(100)
以上是深析Vue router-link組件實現路由導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！
