vue3路由传参

页面跳转方式

1. 声明式 RouterLink 组件
2. 编程式 访问路由器$router的方法（.push、.replace、go等）

带参数的动态路由匹配（动态字段以冒号开始）

1. 一个参数的

const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。
params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

2. 多个参数

/users/:username/posts/:postId
像路由路径/users/eduardo/posts/123
$route.params参数：{ username: 'eduardo', postId: '123' }

3. 可对参数类型进行正则校验

const routes = [
  // /:orderId -> `仅匹配数字`
  { path: '/:orderId(\d+)' },
  // /:productName -> 匹配其他任何内容
  { path: '/:productName' },
]

4. 可重复的参数

1. 如果你需要匹配具有多个部分的路由，如 /first/second/third，你应该用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重
const routes = [
  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
  { path: '/:chapters+' },
  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
  { path: '/:chapters*' },
]

这将为你提供一个参数数组，而不是一个字符串，并且在使用命名路由时也需要你传递一个数组：
// 给定 { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 产生 /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// 产生 /a/b

// 给定 { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// 抛出错误，因为 `chapters` 为空

这些也可以通过在右括号后添加它们与自定义正则结合使用
const routes = [
  // 仅匹配数字
  // 匹配 /1, /1/2, 等
  { path: '/:chapters(\d+)+' },
  // 匹配 /, /1, /1/2, 等
  { path: '/:chapters(\d+)*' },
]

5. 路由可选参数，使用 ? 修饰符(0 个或 1 个)

const routes = [
  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' },
  // 匹配 /users 和 /users/42
  { path: '/users/:userId(\d+)?' },
]

路由单开传参

// router.js中
{
    path: "/progress",
    component: () => import("@/views/progress"),
  },

// 组件跳转
proxy.$router.push({ path: "/progress", query: {
    projectId: props.id
} });

注意：

1. 使用动态传参，每次都会作为一个新的路由打开
2. 免登录时注意白名单配置的路由