今天小編給大家分享一下怎么使用Vue router-link組件實現(xiàn)路由導(dǎo)航的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供于都企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為于都眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。

Vue Router

通過 Vue.js，我們已經(jīng)用組件組成了我們的應(yīng)用。當(dāng)加入 Vue Router 時，我們需要做的就是將我們的組件映射到路由上，讓 Vue Router 知道在哪里渲染它們。

Vue Router的使用

聲明式

使用 router-link組件進行導(dǎo)航，通過傳遞 to 來指定鏈接。
<router-link> 將呈現(xiàn)一個帶有正確 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>

這里沒有使用常規(guī)的 a 標簽，而是使用一個自定義組件 router-link 來創(chuàng)建鏈接。這使得 Vue Router 可以在不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。

router-view
router-view 將顯示與 url 對應(yīng)的組件。可以把它放在任何地方，以適應(yīng)布局。

編程式導(dǎo)航

除了使用 <router-link> 創(chuàng)建 a 標簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。

想要導(dǎo)航到不同的 URL，可以使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，會回到之前的 URL。

當(dāng)點擊 <router-link> 時，內(nèi)部會調(diào)用這個方法，所以點擊 <router-link :to="..."> 相當(dāng)于調(diào)用 router.push(...) ：

聲明式	編程式
<router-link :to="...">	router.push(...)

該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。

// 字符串路徑
router.push('/users/eduardo')

// 帶有路徑的對象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 會被忽略

// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

替換當(dāng)前位置

作用與router.push類似，不同的是，它在導(dǎo)航時不會向 history 添加新記錄

聲明式	編程式
<router-link :to="..." replace>	router.replace(...)

也可以直接在傳遞給 router.push 的 routeLocation 中增加一個屬性 replace: true：

router.push({ path: '/home', replace: true })
// 相當(dāng)于
router.replace({ path: '/home' })

橫跨歷史

該方法采用一個整數(shù)作為參數(shù)，表示在歷史堆棧中前進或后退多少步，類似于window.history.go(n)。

// 向前移動一條記錄
router.go(1)
// 相當(dāng)于
router.forward()

// 返回一條記錄
router.go(-1)
// 相當(dāng)于
router.back()

// 前進 3 條記錄
router.go(3)

// 如果沒有那么多記錄，靜默失敗
router.go(-100)
router.go(100)

以上就是“怎么使用Vue router-link組件實現(xiàn)路由導(dǎo)航”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標題：怎么使用Vuerouter-link組件實現(xiàn)路由導(dǎo)航
轉(zhuǎn)載注明：http://chinadenli.net/article22/jigojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、電子商務(wù)、搜索引擎優(yōu)化、虛擬主機、面包屑導(dǎo)航、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)