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

Vue Router

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

Vue Router的使用

宣告式

使用router-link 元件進行導航，透過傳遞to 來指定連結。
<router-link></router-link> 將呈現一個帶有正確 href 屬性的 <a></a> 標籤。
官方範例：

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1 id="Hello-nbsp-App">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></router-link> 建立a 標籤來定義導航鏈接，我們還可以藉助router 的實例方法，透過編寫程式碼來實現。

想要導覽到不同的 URL，可以使用 router.push 方法。這個方法會在 history 堆疊中新增一個新的記錄，所以，當使用者點擊瀏覽器後退按鈕時，會回到先前的 URL。

當點擊<router-link></router-link> 時，內部會呼叫這個方法，所以點擊<router-link :to="..."></router-link> 相當於呼叫router.push(...) ：

#宣告式	程式
#<router-link :to="..."></router-link>	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-link>	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中文網其他相關文章！