「router link」各種屬性解釋

2022-09-08 13:51:13 字數 1099 閱讀 9838

在vue1.0版本的超連結標籤還是原來的a標籤,鏈結位址由v-link屬性控制

而vue2.0版本裡超連結標籤由a標籤被替換成了router-link標籤,但最終在頁面還是會被渲染成a標籤的

至於為什麼要把a換成router-link原因還是有的,比如我們之前一直慣用的n**導航裡面結構是(ul>li>a),router-link可以渲染為任何元素,這裡可以直接渲染成li標籤,同樣能實現跳轉效果,節省了a標籤的使用,還有乙個原因可能是因為a標籤正常是鏈結的跳轉的作用,點選a時可能會過載頁面,使用router-link,此標籤會被vue所監聽,跳轉鏈結時就不會重新整理頁面了。當然這個人理解,不對之處有望指正。

1.":to" 屬 性

相當於a標籤中的"herf"屬性,後面跟跳轉鏈結所用

home

home

2."replace" 屬 性

replace在routre-link標籤中新增後,頁面切換時不會留下歷史記錄

3."tag" 屬 性

具有tag屬性的router-link會被渲染成相應的標籤

home

home

此時頁面的li同樣會起到a鏈結跳轉的結果,vue會自動為其繫結點選事件,並跳轉頁面

4."active-class" 屬 性

home
active-class屬性的預設值是router-link-active,所以如果沒有設定,就會被渲染為這個class

可以在router.js裡面設定

const router = new vuerouter()
5."exact" 屬 性

開啟router-link的嚴格模式

home
上面這個標籤如果不加exact屬性,則會在vue2.leenty.com/article頁面下也會被匹配到,

這卻不是我們的本意,在加了這個屬性後就會正確的匹配到vue2.leenty.com

router link 各種屬性解釋

在vue1.0版本的超連結標籤還是原來的a標籤,鏈結位址由v link屬性控制 而vue2.0版本裡超連結標籤由a標籤被替換成了router link標籤,但最終在頁面還是會被渲染成a標籤的 至於為什麼要把a換成router link原因還是有的,比如我們之前一直慣用的n 導航裡面結構是 ul li...

router link的相關屬性

指定跳轉的路由 home home router link 不想router link渲染成 a 標籤?很簡單,只需要給新增乙個屬性tag即可 home tag button home router link 渲染成button about tag li about router link 渲染成l...

router link的其他屬性補充

在前面 router link 中,我們只是使用了乙個屬性 to,用於指定跳轉的路徑 router link 還有一些其他屬性 tag tag可以指定 router link 之後渲染成什麼元件 首頁 關於 replace replace不會留下history記錄,所以指定replace的情況下,後...