深析Vue router-link元件實現路由導航

Vue Router

通過 Vue.js，我們已經用元件組成了我們的應用。當加入 Vue Router 時，我們需要做的就是將我們的元件對映到路由上，讓 Vue Router 知道在哪裡渲染它們。【相關推薦：】

Vue Router的使用

宣告式

使用 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-view
router-view 將顯示與 url 對應的元件。可以把它放在任何地方，以適應佈局。

程式設計式導航

除了使用 <router-link> 建立 a 標籤來定義導航連結，我們還可以藉助 router 的實體方法，通過編寫程式碼來實現。

想要導航到不同的 URL，可以使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄，所以，當使用者點選瀏覽器後退按鈕時，會回到之前的 URL。

當點選 <router-link> 時，內部會呼叫這個方法，所以點選 <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.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元件實現路由導航的詳細內容，更多請關注TW511.COM其它相關文章！