vue動態路由配置及路由傳參的方式

2022-10-06 00:48:12 字數 1092 閱讀 6884

動態路由:

當我們很多個頁面或者元件都要被很多次重複利用的時候,我們的路由都指向同乙個元件,這時候從不同元件進入乙個程式設計客棧"共用"的元件,並且還要傳引數,渲染不同的資料

這就要用到動態路由跟路由傳參了!

首先我們來了解下router-link這個元件:

簡單來說,它是個導航器,利用to屬性導航到目標元件,並且在渲染的時候會自動生成乙個a標籤,當然官方也有說明,加個tag標籤屬性就可以渲染不同的標籤,可以瀏覽器端檢視到

並且當乙個導航器被啟用的時候,會自動加上乙個css的啟用樣式,可以全域性在路由配置中設定linkactiveclass屬性,屬性名就是樣式css名,一般寫為active

現在基本了解了router-link,先講一下動態路由配置吧

我們在配置路由的時候,將目標元件的路徑先配置好,如:

比如多個路由都要進入list元件,這時候在配置路由程式設計客棧路徑後加個:id(id可隨便取名,標識),這個屬性id可以在$route.params.id中獲取,例如:

當前這個child元件要進入,以上配置的id就等於on;這時候在list元件中列印出$route.params.id就可以得到這個屬性值on

這個時候,不同元件進入同一目標元件時就可以得到標識跟備註了,也可以利用這個來傳遞一些正常的引數

接著往下看,帶引數的路由,跟獲取傳來的引數值

當router-link被啟用點選時,會將當前的to的值push到router物件當中(路由棧),所以這個值可以是string也可以是obj

傳引數的時候,我們就寫成物件的形式,用到v-bind的js表示式

此時整個的理解可以為:我是child元件過來的,而且我還帶來了我的名字,我叫child

在lis程式設計客棧t元件當中去獲取這個引數值跟id的值

如果是不同程式設計客棧的元件過來的,可以設定不同的id值,只要在目標元件獲取屬性id的值就可以了,引數就利用query.屬性值來獲取。

總結以上所述是小編給大家介紹的vue動態路由配置及路由傳參的方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編www.cppcns.com會及時回覆大家的。在此也非常感謝大家對我們**的支援!

本文標題: vue動態路由配置及路由傳參的方式

本文位址:

Vue路由 路由配置 傳參 獲取引數

this.route 和 this.router區別 this.route 資訊引數 query prams 傳參獲取 this.router 功能函式,go push 等方法呼叫1.匯入和使用路由 main.js import router from vue router 使用路由 vue.use...

Vue路由傳參

getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新增 id來對應 rou ter.push 中pat h攜帶的 引數。在 子元件中 可以使用 來獲取傳 遞的引數 值。th is router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。t...

vue路由傳參

傳參方式一 router link方式 1.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 2.params 是要傳送的引數,引數可以直接key value形式傳遞 3.query 是通過 url 來傳遞引數的同樣是key value形式傳遞 2,3兩...