VUE3动态路由

需求

页面上有一个按钮，点击以后打开一个新窗口

问题描述

父页面传值

import { useRouter } from 'vue-router' //引入useRouter

setup(){
    const router = useRouter();
    //row中是列表这一行的数据
    const handleEdit = (index,row) => {
			const p1=reactive(row)
			const href = router.resolve({
				name: 'docS',
				params: {
					id:p1.id
				}
			})
			window.open(href.href, '_blank')
		}

}

 子页面接受

import { useRouter,useRoute } from 'vue-router' //引入useRouter



setup(){
    const route=useRoute()
    consolg.log(route.params.id)

}

 路由配置

{
			    path:'/docS',
			    name:'docS',
			    component:()=>import(/*webpackChunkName:'Docpage'*/'@/page/doc-page/docS.vue'),
},

使用这样的方式，会发现新窗口的子页面接受不到 任何数据

解决方法

使用VUE3动态路由设计

路由配置

{
			    path:'/docS/:id',
			    name:'docS',
			    component:()=>import(/*webpackChunkName:'Docpage'*/'@/page/doc-page/docS.vue'),
			},

这样配置路由，即可在子页面接收到参数

新的问题

1、虽然解决了传参的问题，但如果传递的对象的话，会发现url中暴露数据，

解决方案就是只传递一个id，再到后台重新查询数据

2、同时发现，这样会导致侧边栏失效，

这个有待解决。。。。。

其他

一些其他的路由传参相关，他人的帖子已经有很多了，这里不再赘述。