組件的屬性有：

to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

to（必選參數(shù)）：類型string/location
表示目標(biāo)路由的鏈接，該值可以是一個(gè)字符串，也可以是動(dòng)態(tài)綁定的描述目標(biāo)位置的對(duì)象

<!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染結(jié)果 --> <a href="home">Home</a><!-- 使用 v-bind 的 JS 表達(dá)式 --> <router-link v-bind:to="'home'">Home</router-link><!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 --> <router-link :to="'home'">Home</router-link><!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link><!-- 命名的路由 --> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link><!-- 帶查詢參數(shù)，下面的結(jié)果為 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

• 類型: boolean

• 默認(rèn)值: false

設(shè)置 replace 屬性的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用 router.replace() 而不是 router.push()，于是導(dǎo)航后不會(huì)留下 history 記錄。

<router-link :to="{ path: '/abc'}" replace></router-link>

append
-類型: boolean

默認(rèn)值: false

設(shè)置 append 屬性后，則在當(dāng)前（相對(duì)）路徑前添加基路徑。例如，我們從 /a 導(dǎo)航到一個(gè)相對(duì)路徑 b，如果沒(méi)有配置 append，則路徑為 /b，如果配了，則為 /a/b

tag
類型: string

默認(rèn)值: “a”

有時(shí)候想要 渲染成某種標(biāo)簽，例如

• 。 于是我們使用 tag prop 類指定何種標(biāo)簽，同樣它還是會(huì)監(jiān)聽(tīng)點(diǎn)擊，觸發(fā)導(dǎo)航。

• <router-link to="/foo" tag="li">foo</router-link> <!-- 渲染結(jié)果 --> <li>foo</li>

  active-class
  類型: string

  默認(rèn)值: “router-link-active”

  設(shè)置 鏈接激活時(shí)使用的 CSS 類名。默認(rèn)值可以通過(guò)路由的構(gòu)造選項(xiàng) linkActiveClass 來(lái)全局配置。

  <router-link :to="{path:'/about'}" active-class="activeClass">about</router-link>

  默認(rèn)值通過(guò)路由的構(gòu)造選項(xiàng) linkActiveClass 來(lái)全局配置,如下示例：

  export default new Router({mode:'history',linkActiveClass:'is-active',routes: [{path:'/about',component:about} ] })

  exact
  類型: boolean

  默認(rèn)值: false

  “是否激活” 默認(rèn)類名的依據(jù)是 inclusive match （全包含匹配）。 舉個(gè)例子，如果當(dāng)前的路徑是 /a 開(kāi)頭的，那么也會(huì)被設(shè)置 CSS 類名。

  按照這個(gè)規(guī)則， 將會(huì)點(diǎn)亮各個(gè)路由！想要鏈接使用 “exact 匹配模式”，則使用 exact 屬性：

  <!-- 這個(gè)鏈接只會(huì)在地址為 / 的時(shí)候被激活 --><router-link to="/" exact>

  路由實(shí)例方法：
  1、push()

  // 字符串this.$router.push('home') // 對(duì)象this.$router.push({ path: 'home' }) // 命名的路由 變成 /user/123this.$router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數(shù)，變成 /register?plan=123this.$router.push({ path: 'register', query: { plan: '123' }})

  注意：push方法的跳轉(zhuǎn)會(huì)向 history 棧添加一個(gè)新的記錄，當(dāng)我們點(diǎn)擊瀏覽器的返回按鈕時(shí)可以看到之前的頁(yè)面。

  2、go()

  // 頁(yè)面路由跳轉(zhuǎn) 前進(jìn)或者后退 this.$router.go(-1) // 后退

  3、replace()
  push方法會(huì)向 history 棧添加一個(gè)新的記錄，而replace方法是替換當(dāng)前的頁(yè)面，
  不會(huì)向 history 棧添加一個(gè)新的記錄

  一般使用replace來(lái)做404頁(yè)面

  this.$router.replace(’/’)

  配置路由時(shí)path有時(shí)候會(huì)加 ‘/’ 有時(shí)候不加,以’/'開(kāi)頭的會(huì)被當(dāng)作根路徑，就不會(huì)一直嵌套之前的路徑。

  總結(jié)：

  $route:路由信息對(duì)象，只讀對(duì)象；

  $router:路由操作對(duì)象 ，只寫對(duì)象。

總結(jié)

以上是生活随笔為你收集整理的router-link的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。