关于router.push

502 阅读1分钟

1. 第一种

不必配置路由,但也不能用prop解耦获取参数

传值:

this.$router.push( {path: “/demo1/demo2”, query: { id: 1} } )

取值:

this.$route.query.id

地址栏显示路径为:…/demo1/demo2?id=1


2. 第二种

需要在路由中配置路径为/demo1/demo2/:id

传值:

this.$router.push( `/demo1/demo2/${ id: 1 }` )

取值:

this.$route.query.id

地址栏显示路径为:…/demo1/demo2/1


3. 第三种

不必配置路由,但是不配置路由时刷新页面会失去参数,配置路由刷新页面不会丢参,可用prop解耦获取参数

(⚠️:当参数为Object类型时,刷新之后无法解耦,参数丢失)

传值:

this.$router.push( { name: “demoName”, params: { id: 1 } } )

取值:

this.$route.params.id

地址路径为: …/demo1/demo2