vue路由傳參方式 nuxt

2021-08-20 12:13:04 字數 862 閱讀 2460

vue路由傳參常用的三種方式

1、通過params來傳遞引數(本人常用)傳遞引數

接收引數

2、通過path跳轉

getdescribe(id) `,

})

對應路由配置如下:

接收引數

$route.params.id
3、通過query傳參 引數會顯示在url後面?id=?

注意:頁面之間的跳轉使用query 不然的話重新整理頁面後會找不到引數

})對應的路由配置

接收引數

$route.query.id
注意:route與router的區別

$route為當前router跳轉物件裡面可以獲取name、path、query、params等

$router為vuerouter例項,想要導航到不同url,則使用$router.push方法

返回上乙個history也是使用$router.go方法

Vue路由傳參方式

傳送引數 在路由中寫好 接收引數 route.name傳送引數 this.router.push 接收引數 注意 該方式不需要配置路由 傳送引數 this.router.push news userid 123 this.router.push this.router.push 接收引數 注意 該方...

nuxt頁面跳轉 nuxt路由及傳參

最近的nuxt專案中經常會用到路由傳參,故在此有所總結了下nuxt中傳參的方式和vue專案中傳參的方式 nuxt 作為ssr的nuxt專案中路由是根據pages下的檔案結構自動生成的,無需手動配置路由。很多時候專案需求,有列表頁和詳情頁。方式一 如圖 image 詳情頁命名為 id.vue 不要問我...

vue路由傳參的方式

getdata id 方案一,需要對應路由配置如下 需要在path中新增 id來對應 router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。this.route.params.id 父元件中 通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數 this...