<router-link>屬性詳解
<router-link>
元件支援使用者在具有路由功能的應用中點選導航。通過to屬性指定目標地址,預設渲染為帶有正確連線的<a>
標籤,可以通過配置tag屬性生成別的標籤。另外,當目標路由成功啟用時,連結元素自動設定一個表示啟用的css類名
<router-link>
元件的屬性有:
to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class
to(必選引數):型別string/location
表示目標路由的連結,該值可以是一個字串,也可以是動態繫結的描述目標位置的物件
<!-- 字串 --> <router-link to="home">Home</router-link> <!-- 渲染結果 --> <a href="home">Home</a> <!-- 使用 v-bind 的 JS 表示式 --> <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> <!-- 帶查詢引數,下面的結果為 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace
- 型別: boolean
- 預設值: false
設定 replace 屬性的話,當點選時,會呼叫router.replace()
而不是router.push()
,於是導航後不會留下 history 記錄。
<router-link :to="{ path: '/abc'}" replace></router-link>
append
- 型別: boolean
- 預設值: false
設定 append 屬性後,則在當前(相對)路徑前新增基路徑。例如,我們從 /a 導航到一個相對路徑 b,如果沒有配置 append,則路徑為 /b,如果配了,則為 /a/b
tag
- 型別: string
- 預設值: “a”
有時候想要<router-link>
渲染成某種標籤,例如<li>
。 於是我們使用 tag prop 類指定何種標籤,同樣它還是會監聽點選,觸發導航。
<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染結果 --> <li>foo</li>
active-class
- 型別: string
- 預設值: “router-link-active”
設定 連結啟用時使用的 CSS 類名。預設值可以通過路由的構造選項 linkActiveClass 來全域性配置。
<router-link :to="{path:'/about'}" active-class="activeClass">about</router-link>
預設值通過路由的構造選項 linkActiveClass 來全域性配置,如下示例:
export default new Router({ mode:'history', linkActiveClass:'is-active', routes: [ { path:'/about', component:about } ] })
exact
- 型別: boolean
- 預設值: false
“是否啟用” 預設類名的依據是 inclusive match (全包含匹配)。 舉個例子,如果當前的路徑是 /a 開頭的,那麼<router-link to="/a">
也會被設定 CSS 類名。
按照這個規則,<router-link to="/">
將會點亮各個路由!想要連結使用 “exact 匹配模式”,則使用 exact 屬性:
<!-- 這個連結只會在地址為 / 的時候被啟用 --> <router-link to="/" exact>