前端技术社区总目录（订阅之前请先查看该博客）

效果截图

一：路由传参有两种方式：params与query

params与query区别
1：param,路由带“/”，query带“？”
2：query传过来的参数会显示到地址栏中 而params传过来的参数可以显示参数或隐藏参数到地址栏中（vue-router 4.1.4不支持隐藏方式）
3：params相对query安全一些
4：params 获取方式：route.params.id;
5：querey 获取方式：route.query.id;

二：相关代码实现

2.1 Router.js代码

import { createRouter, createWebHashHistory, createWebHistor