vue以params与query由父路由向子路由传参

vue里路由传值应用方式，由父路由向子路由传值时，需要携带参数进行跳转，子路由通过父路由传递参数向后台发出请求来渲染页面，其中由query传参，params传参

跳转方式又可分为声明式和编程式

声明式

<router-link to='跳转地址'></router-link>

编程式

this.$router.push({path:'跳转地址'})

params子路由向父路由传递参数（这种传参方式在地址栏是可见的）

router下index.js如下设置

子路由规则如下设置

将要设置子路由的跳转规则后加：id，由父路由传递参数的不确定性所以这里不能写死冒号表示这个后面可能为任意值，id这这里相当于键名，在后面获取父路由传递参数时会用到

父路由编程式跳转传参

this.$router.push({path:`/跳转子路由地址/${传递参数}`})

子路由获取传递参数方式

this.$route.params.这里接受的是router下index.js里子路由冒号后面的值

这种方式传参在地址栏显示是这样的

params子路由向父路由传递参数（这种传参方式在地址栏是不可见的）

router下index.js如下设置

子路由规则如下设置

父路由编程式跳转传参

this.$router.push({ name: "子路由名称", params: { 传递参数名: 传递参数值 } });

子路由获取传递参数方式

this.$route.params.参数名

这种方式传递参数最后变现是这个样子的

query传参方式（这种传参方式地址栏可见传参内容）

router下index.js如下设置

子路由规则如下设置

[

父路由编程式跳转传参

this.$router.push({ name: "子路由名称", query: { 传递参数名: 传递参数值 } })

子路由获取传递参数方式

this.$route.query.参数名称;

这种传参方式最后在地址栏以问号在地址栏传参