标签：传参 Vue name route vue query 路由
目的
以Vue为基础做一套WebGIS系统，更多需要的是嵌套路由和VueX状态管理，因此针对网上的教程学习后，自己补充一些自己的观点，进行学习与巩固
PS：关于路由一整套流程此处不再赘述，可参考下方两位优秀博主的文章，本文章只写一些个人容易忘，并且做项目用得较多的点
参考教程
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参数
标签：传参,Vue,name,route,vue,query,路由 来源： https://blog.csdn.net/qq465908194/article/details/122361356
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。