欢迎光临
我的个人博客网站

Vue路由管理及传参


目的

以Vue为基础做一套WebGIS系统,更多需要的是嵌套路由和VueX状态管理,因此针对网上的教程学习后,自己补充一些自己的观点,进行学习与巩固

PS:关于路由一整套流程此处不再赘述,可参考下方两位优秀博主的文章,本文章只写一些个人容易忘,并且做项目用得较多的点

参考教程

可能比文档还详细–VueRouter完全指北 – 掘金

vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题 – 掘金

路由

关于router-view

因为WebGIS通常都是一张图,所以这个router-view一般都是和地图放在同一个路由下,如下代码

//路由模块 const routes = [   {     path: '/',     name: 'Home',     component: Home,     children:[       {         path:'/ohterabout',         name:'OhterAbout',         component:()=>import('../views/TestAbout.vue')       }     ]   },   {     path: '/about',     name: 'About',     // route level code-splitting     // this generates a separate chunk (about.[hash].js) for this route     // which is lazy-loaded when the route is visited.     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')   } ] 

主页代码

//home.vue <div class="home">     <div  class="qiehuan">     <button  @click="change">切换外界About路由</button>     <button @click="Anotherchange">切换内部嵌套About路由</button>     </div>     <Map>     </Map>       <router-view></router-view>   </div> 

入口代码

//App.vue <template>   <div id="app">     <router-view/>   </div> </template> 

通过上述代码可知,如果创建的组件想通过路由的方式与地图模块展示在一起,则需要写在home组件下,与Map组件放在一起(又或者把地图组件分隔开来,再真正的嵌入到地图组件中)

否则如果在路由中不写children,一般都会展示在App.vue的router-view上,即展开一个新的模块界面

传参

首先明确的第一点是params和query通过路由传参的,实际上就类似get和post请求的区别

但是通过params(相当于post)进行传参会导致界面刷新时,参数消失的情况,而query请求(相当于get)则不会

函数式路由

//跳转路由时发起请求---params请求 this.$router.push({         name:'OhterAbout',         params:{           id:this.sendData.id,           titile:this.sendData.titile         }       })  //query请求 this.$router.push({         name:'OhterAbout',         query:{           id:this.sendData.id,           titile:this.sendData.titile         }       }) 

接收参数

mounted(){     console.log("dddd",this.$route)   } 

通过this.$route即可获得当前路由传进来的参数,其中就有相应的params或者query参数

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue路由管理及传参
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏