antd点击跳转页面且有参数 |
您所在的位置:网站首页 › antd路由配置 › antd点击跳转页面且有参数 |
![]() 注:js操作router使用this.$router,读取参数使用this.$route,当中相差一个r,需要注意 params路由参和query查询参两者区别是什么? (1)params相当于post,浏览器地址栏看不到请求参数,但是在配置路由时一定要配置参数 路由配置 :{path:'/XXX/ : 参数名1/ : 参数名1 ', name='XXX ', component='XXX'} 传递参数: 获取参数:this.$route.params.参数名 (2)query相当于get,浏览器地址栏可以看到请求参数 路由配置 :{path:'/XXX ', name='XXX ', component='XXX'} 不用配置参数名 传递参数: 获取参数:this.$route.query.参数名 为了方便记忆,建议router跳转都使用name 使用上一个例子改写两个组件的路由配置及跳转 组件1 使用params传参 //路由配置,要配置参数 /:参数名 {path:'/temp1/:username', name:'temp1', component:Temp1} //路由跳转,使用name 我是组件1,使用params传参 //Temp1 修改并取参数this.$route.params var Temp1 = { template:` 我是组件1页面{{ msg1 }} `, data(){ msg1:'' }, created(){ this.msg1 = this.$route.params.username } }组件2使用query传参 //路由配置,不用配置参数 {path:'/temp2', name:'temp2', component:Temp2} //路由跳转,可以使用name和path 我是组件2,query传参 //Temp2 修改并取参数this.$route.query var Temp2 = { template:` 我是组件2页面{{ msg2 }} , data(){ msg2:'' }, created(){ this.msg2 = this.$route.query.name } }运行结果 ![]() 点击跳转组件1页面,注意看地址栏 ![]() 点击跳转组件2页面,注意看地址栏 ![]() 注:路由路径一致时,参数不同不会发生跳转,使用 :key=“$route.fullPath”,就可以识别整个路径不同进行跳转 路由嵌套子路由配置中使用children[{ },{ }]配置子路由,并在上级页面中router-view留坑位 首先写两个组件,并配置路由,子路由中path不需要 / ,不然路由跳转时找不到 var Temp1 = { template:` 我是组件1页面 ` } var Temp2 = { template:` 我是组件2页面 ` } var router = new VueRouter({ routes:[ { path:'/temp1', name:'temp1', component:Temp1, //配置子路由,数组 children:[ //配置temp2 {path:'temp2', name:'temp1.temp2', component:Temp2} ] }, ] })然后再vue中修改 new Vue({ el:'#app', router, template:` 我是主页 我是组件1 我是组件2 ` })运行显示: ![]() 点击组件1,注意地址栏 /temp1 ![]() 点击组件2,应该跳转子路由 /temp1/temp2,发觉组件2页面并未跳转成功,为什么??? ![]() 这时候我又想了想了一下,配置子路由,必须在页面留坑位,我为temp1配置了子路由,是不是我应该在Temp1页面中也留下坑位,虽然我在主页中留了坑位,但是对子路由页面显示不起作用,所以我在Temp1加了router-view留坑位,进行尝试 var Temp1 = { template:` 我是组件1页面 //给子路由留坑位 ` }运行显示: /temp1/temp2显示成功,所以要记住子路由是嵌套必须在上级留下坑位,不然无法显示 ![]() |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |