目的

以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参数