![69985e4ac191bd5f90c96df25e41a2dd.png](https://i-blog.csdnimg.cn/blog_migrate/0854421ac06c594afc153f2619532cf6.jpeg)
路由参数的传递和获取
注:js操作router使用this.$router,读取参数使用this.$route,当中相差一个r,需要注意
params路由参和query查询参两者区别是什么?
(1)params相当于post,浏览器地址栏看不到请求参数,但是在配置路由时一定要配置参数
路由配置 :{path:'/XXX/ : 参数名1/ : 参数名1 ', name='XXX ', component='XXX'}
传递参数:<router-link :to=
“{name:'XXX', params:{参数名1:XXX,参数名2:XXX}}”>
获取参数:this.$route.params.参数名
(2)query相当于get,浏览器地址栏可以看到请求参数
路由配置 :{path:'/XXX ', name='XXX ', component='XXX'} 不用配置参数名
传递参数:<router-link :to=“{name或者path:'XXX', query:{参数名1:XXX,参数名2:XXX}}”>
获取参数:this.$route.query.参数名
为了方便记忆,建议router跳转都使用name
使用上一个例子改写两个组件的路由配置及跳转
组件1 使用params传参
//路由配置,要配置参数 /:参数名
组件2使用query传参
//路由配置,不用配置参数
运行结果
![59b2fffd87e3828d74bacc7990ba035b.png](https://i-blog.csdnimg.cn/blog_migrate/816da73ba67cafbea71d217c00ff2e87.jpeg)
点击跳转组件1页面,注意看地址栏
![b62638ed00a56469878a81dd58cf93a3.png](https://i-blog.csdnimg.cn/blog_migrate/cb43b17120c8c57d9a03f0ba7fe90e55.jpeg)
点击跳转组件2页面,注意看地址栏
![0084a04951c8f7fde9e6379b1e0a4561.png](https://i-blog.csdnimg.cn/blog_migrate/af5fe3ba411764fad0ba84341bdac4b3.jpeg)
注:路由路径一致时,参数不同不会发生跳转,使用 :key=“$route.fullPath”,就可以识别整个路径不同进行跳转
路由嵌套
子路由配置中使用children[{ },{ }]配置子路由,并在上级页面中router-view留坑位
首先写两个组件,并配置路由,子路由中path不需要 / ,不然路由跳转时找不到
var
然后再vue中修改
new Vue({
el:'#app',
router,
template:`
<div>
<div>我是主页</div>
<h3><router-link :to="{name:'temp1'}">我是组件1</router-link></h3>
<h3><router-link :to="{name:'temp1.temp2'}">我是组件2</router-link></h3>
<router-view></router-view>
</div>
`
})
运行显示:
![09eea782a59ffd15cc3da71414192442.png](https://i-blog.csdnimg.cn/blog_migrate/1e2f4a0da6c22e69df6a7a288732a25e.png)
点击组件1,注意地址栏 /temp1
![fa6500d662efb37c4ba31b32193f587d.png](https://i-blog.csdnimg.cn/blog_migrate/736c557da55a7f1c7ac7113e686a0bd6.jpeg)
点击组件2,应该跳转子路由 /temp1/temp2,发觉组件2页面并未跳转成功,为什么???
![d322a5453b006b99052203895f486021.png](https://i-blog.csdnimg.cn/blog_migrate/c055e2c8d481491af2ae1da69b43d46d.jpeg)
这时候我又想了想了一下,配置子路由,必须在页面留坑位,我为temp1配置了子路由,是不是我应该在Temp1页面中也留下坑位,虽然我在主页中留了坑位,但是对子路由页面显示不起作用,所以我在Temp1加了router-view留坑位,进行尝试
var Temp1 = {
template:`
<div>
我是组件1页面
//给子路由留坑位
<router-view></router-view>
</div>
`
}
运行显示: /temp1/temp2显示成功,所以要记住子路由是嵌套必须在上级留下坑位,不然无法显示
![cc42028db77ef9cedbebee1d7e81c460.png](https://i-blog.csdnimg.cn/blog_migrate/823d58605d130059770ea85a3563dae9.jpeg)