Vue路由管理及传参

目的

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

路由

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_11015