携带参数跳转页面步骤（params、query）

携带参数跳转页面步骤（params、query）

params

实例
1.router/page/index.js 配置路由参数

{
  path: '/workManagement', //跳转的路径
  redirect: '/digitalHuman/workManagement/index',//跳转路径重定向
  name: 'workManagement',
  component: () =>
      import( /* webpackChunkName: "page" */ '@/views/digitalHuman/workManagement/index'),//跳转到的页面
},

2.父页面

 this.$router.push({
       name:'workManagement',
       params: {
           projectId: row.id
       }
   })

3.子页面调用

 mounted() {
  this.query.projectId = this.$route.params.projectId
     this.onLoad(this.page,this.query)
 },

query

实例
2.父页面

this .$router.push(f
	path:'/digitalHuman/digitalHumanWorkManagement/index，
	query: {
	   projectId: row.id
	}
)

3.子页面调用

mounted(){
	this.query.projectId = this .$route.query.projectId
	this.onLoad(this.page,this.query)
}

首先据我音的资料。this.Srouter.push路由跳传有以下几种形式:
1.不带参数

this .$router.push('/home')
this.$router .push({name: "home "})
this .$router. push({path: '/hone'})

2.query传参

this.$router.push({name: 'home',query: {id:'1'}})
this.$router.push({path: '/hone',query: {id:'1'}})
//html 取参 $route.query.id
// script 取参 this.$route.query.id

3，params传参

this.$router.push({name: 'home,parans: {id;"1'}}) // 只能用 name
//路由配置path: "/home/:id"  或者 path: "/hone:id"
//不配置path ，第一次可请求,刷新页面id会消失
//配置path，刷新页面id会保留
//html 取参 $route.params.id
// script 取参 this.$route.params.id

4，queryiparans区别
query类似 get，跳转之后页面 ur1后面会拼接参数,类似?id=1，非重要性的可以这样传，密码之类还是用params刷新页面id还在
params类似 post，跳转之后页面 url后面不会拼接参数 ，但是刷新页面id 会消失