怎么使用Vue router-link組件實現路由導航

今天小編給大家分享一下怎么使用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">
  <h2>Hello App!</h2>
  <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組件實現路由導航”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。