/chapters?courseId=32 vue3中路由和传参应该怎么写

在 Vue3 中使用 Vue Router 可以按照以下步骤配置路由和传递参数：

1. 安装 Vue Router

npm install vue-router@next

2. 在 main.js 中引入 Vue Router

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/chapters',
      component: () => import('./views/Chapters.vue')
    }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

3. 创建一个名为 Chapters.vue 的视图组件，用于显示章节信息

<template>
  <div>Chapters of course {{ courseId }}</div>
</template>

<script>
export default {
  name: 'Chapters',
  props: {
    courseId: {
      type: String,
      required: true
    }
  }
}
</script>

4. 在路由中传递参数

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/chapters',
      component: () => import('./views/Chapters.vue'),
      props: route => ({ courseId: route.query.courseId })
    }
  ]
})

这里通过 props 属性将路由中的参数传递给组件，使用 route.query.courseId 获取传递的参数。

现在你就可以在浏览器中访问 `/chapters?courseId=32`，看到页面上显示 "Chapters of course 32"。