Vue中router link元件的屬性

2021-10-02 03:00:30 字數 1984 閱讀 8359

以下面的路由配置為例,介紹一下router-link元件的屬性

routes:[},}]

路由的目標,值可以是乙個字串,也可以是描述目標位置的物件,觸發(預設click觸發)導航會立刻把to的值傳送給router.push()方法。

"/home"

>

首頁router-link

>

:to=

"">

首頁router-link

>

boolean型別,設定replace為true時,會執行 router.replace() 方法,這樣做history棧中不會增加一條記錄。

"/home"

replace

>

首頁router-link

>

string型別,預設值是"a",用來指定渲染成何種標籤

"/home"

tag="li"

>

首頁router-link

>

string型別或array型別,預設值是"click",用來宣告可以用來觸發導航的事件

"/home"

event

="mouseover"

>

首頁router-link

>

boolean型別,預設值是false ,用來設定是否使用精確匹配模式,匹配模式有模糊匹配和精確匹配

string型別,預設值是"router-link-active",用來設定鏈結啟用時使用的 css 類名,只要url中有某router-link中的to屬性對應的路由,啟用指定的啟用的 class。

string型別,預設值是"router-link-exact-active",用來配置當鏈結被精確匹配的時候應該啟用的 class。

精確匹配必須要在url中完全匹配到router-link中的to屬性對應的路由,啟用指定的啟用的 class。

"/home"

>

首頁1router-link

>

"/home"

exact

>

首頁2router-link

>

"/home"

active-class

="is-actived"

exact-active-class

="is-exact-actived"

>

首頁3 router-link

>

"/home/1"

>

首頁4router-link

>

"/products"

>

列表router-link

>

上面的例子中,當url時…#/home/1時,渲染的頁面是

首頁1模糊匹配但不精確匹配,預設的class 「router-link-active」 被啟用,

首頁2要求精確匹配,所以匹配不成功,

首頁3模糊匹配成功,設定的active-class被啟用,

首頁4模糊匹配和精確匹配都成功,預設的class 「router-link-active」 和"router-link-exact-active"被啟用。

"/products"

>

產品1router-link

>

"products"

>

產品2router-link

>

vue使用router link跳轉vue頁面

要完成頁面的跳轉,需要在這幾個檔案下操作 1 主頁面 home.vue 2 被跳轉的頁面 3 router下的index.js page share.vue 1 主頁面 home.vue 前端2 被跳轉的頁面 page share.vue 內容不重要,我這裡的內容是元件,這個無所謂 3 router...

vue 頁面跳轉 router link

src目錄是我們要寫 的目錄import vue from vue import router from vue router import helloworld from components helloworld vue.use router export default newrouter 在...

vue中router link傳參以及引數的使用

方法一 路徑 http localhost 8080 index 1 router link to index id 跳轉 id是引數 路由 引數使用 this.route.params.id 這個id給上圖路由的配置有關 方法二 路徑 http localhost 8080 index?name ...