Vue中的路由傳參

2021-10-02 18:30:55 字數 1288 閱讀 2649

1.通過query獲取引數

建立路由物件,將路由物件註冊到vue例項中去

var 頁面模板物件=

var router=

newvuerouter(]

})var vm=

newvue(,

methods:

, router:router

})

在頁面上新增router-view和router-link標籤,並傳參

>

"/監聽的路由鏈結位址?id=1"

>

aaarouter-link

>

//可以用&連線多個引數

>

router-view

>

div>

獲取傳遞過來的引數

vue-router會將傳遞過來的引數放入乙個route物件中,這種自帶的物件可以通$route進行訪問,而傳參會被儲存在$route下的query物件中,作為query物件的屬性存放

這個傳遞過來的引數,只有接收的元件下的router才有

var 頁面模板物件=}'

,//也可以在方法中呼叫

created()

}

2.通過params獲取引數

建立路由物件,將路由物件註冊到vue例項中去

var 頁面模板物件=

var router=

newvuerouter(]

})var vm=

newvue(,

methods:

, router:router

})

在頁面上新增router-view和router-link標籤,並傳參

>

>

aaarouter-link

>

//可以用/連線多個引數

>

router-view

>

div>

獲取傳遞過來的引數

var 頁面模板物件=}'

,//也可以在方法中呼叫

created()

}

總結

第一種方式不需要提前定義佔位符,可以直接使用,比較方便,而且就算沒有傳參,也可以使用路由

第二種方式需要提前定義佔位符,不能直接使用,傳遞引數時比較方便,路徑中的引數也不容易暴露資訊

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兩...

Vue 路由傳參

需求 獲取傳遞引數 login 11314555 路由傳參 router link loginbyid 11314555 路由傳參 button 方式一 路由配置 需要在path中新增 id 來對應 router.push 中path攜帶的引數 呼叫方法 loginbyid id 引數獲取 this...