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