vue筆記之路由傳參

2021-08-28 16:04:32 字數 1888 閱讀 8499

1.使用query方式

>

"/login?id=10&name=zs"

tag="span"

>

登入router-link

>

"/register"

>

註冊router-link

>

>

router-view

>

div>

>

//元件模版物件

var login =

}var register =

//建立乙個路由物件,當匯入vue-router包之後,在window全域性物件中,就有乙個路由的建構函式,叫做vuerouter

//在new路由物件的時候,可以為建構函式,傳遞乙個配置物件

var routerobj =

newvuerouter(,

//,//這裡的redirect和node中的redirect完全是兩碼事,]

})var vm =

newvue(,

methods:

, router:routerobj,

//將路由規則物件註冊到vm例項上,用來監聽url位址的變化,然後展示對應的元件

filters:

,//私有過濾器

directives:

,//私有指令

// 生命週期

beforecreate()

,created()

,beforemount()

,mounted()

,beforeupdate()

,updated()

,beforedestroy()

,destroyed()

});script

>

2.使用params

>

"/login/12/ls"

tag="span"

>

登入router-link

>

"/register"

>

註冊router-link

>

>

router-view

>

div>

>

//元件模版物件

var login =},

created()

}var register =

//建立乙個路由物件,當匯入vue-router包之後,在window全域性物件中,就有乙個路由的建構函式,叫做vuerouter

//在new路由物件的時候,可以為建構函式,傳遞乙個配置物件

var routerobj =

newvuerouter(,

//,//這裡的redirect和node中的redirect完全是兩碼事,]

, linkactiveclass:

'active'})

var vm =

newvue(,

methods:

, router:routerobj,

//將路由規則物件註冊到vm例項上,用來監聽url位址的變化,然後展示對應的元件

filters:

,//私有過濾器

directives:

,//私有指令

// 生命週期

beforecreate()

,created()

,beforemount()

,mounted()

,beforeupdate()

,updated()

,beforedestroy()

,destroyed()

});script

>

Vue學習筆記之路由元件傳參

在元件中使用 route會使之與其對應路由形成高度耦合,從而使元件只能在某些特定的 url 上使用,限制了其靈活性。使用props將元件和路由解耦 取代與 route的耦合 const user const router new vuerouter 通過props解耦 const user cons...

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