详解Vue如何通过URL传递与获取参数

const routes = [
  {
    path: '/course/detail/:id',
    name: 'courseDetail',
    component: CourseDetail,
    meta: {
      title: '课程详情'
    }
  }
]

<router-link :to="{ name: 'courseDetail', params: { id: course.id }, query: { name: course.name, teacher: course.teacher } }">预览</router-link>

<router-link :to="{ name: 'courseDetail', params: { id: course.id }, query: { name: course.name, teacher: course.teacher } }">预览</router-link>

<!-- 获取 params 对象中的参数 -->
<p>课程编号：{{ $route.params.id }}</p>
 
<!-- 获取 query 对象中的参数 -->
<p>课程名称：{{ $route.query.name }}</p>
<p>课程讲师：{{ $route.query.teacher }}</p>

this.id = this.$route.params.Id || 0; //获取 params 对象中的参数
this.name = this.$route.query.name;   //获取 query 对象中的参数

import { useRoute } from 'vue-router';
 
//获取URL参数
const route = useRoute();
let id = route.params.id || 0; //获取 params 对象中的参数
let name = route.query.name;   //获取 query 对象中的参数
let teacher = route.query.teacher;
 
//打印参数
console.log("获取URL参数id:", id);
console.log("获取URL参数name:", name);
console.log("获取URL参数teacher:", teacher);