vue路由之query和params傳參

2021-10-12 19:53:22 字數 802 閱讀 1800

//配置路由表

import vue from

'vue'

import router from

'vue-router'

import nextpage from

'./views/nextpage.vue'

//要跳轉的元件路徑

vue.

use(router)

const router =

newrouter(,

]})export

default router

//路由跳轉並傳參

this

.$router.

push(}

)//接收引數

const data =

this

.$route.query.id

console.

log(

'路由引數:'

, data)

//路由引數:hello query

//路由跳轉並傳參,對比query傳參,path 換成 name ,即為命名路由

this

.$router.

push(}

)//接收引數

const data =

this

.$route.params.id

console.

log(

'路由引數:'

, data)

//路由引數:hello params

vue路由query和params的幾種傳參方式

佔位符 id 宣告式 程式設計式 skipmethod name 或者 this.router.push 路由配置 子元件中獲取 this.route.params.id 注意是 route根據官方文件的說明,我覺得 id 的作用主要是利用props將元件和路由解耦,我通俗的說一下 乙個元件可能是乙...

vue路由傳參 params和query

query傳參 路由 routes 傳參 通過path引入 this router.push 通過name引入 this router.push 接收 com和hhhhome元件中 console.log this route.query params傳參 只能用name引入,不能用path 路由 ...

vue路由傳參params和query的用法和區別

1.params 帶過去id 通過this.router.push 由於動態路由也是傳遞params的,所以在 this.router.push 方法中 path不能和params一起使用,否則params將無效。需要用name來指定頁面。及通過路由配置的name屬性訪問 在路由配置檔案中定義引數 ...