当前位置：首页 > article >正文

Vue使用Vue Router路由：通过URL传递与获取参数

article 2024/9/28 0:09:44

Vue Router 路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。在实际的开发中，经常需要通过URL来传递参数，同时在 JavaScript 脚本中需要获取URL中的参数。下面将介绍 Vue 项目中，如何通过 URL 对参数进行传递与获取。

1、传递 URL 参数

（1）配置路由信息：

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

该路由配置的 path 值为： '/course/detail/:id'，其中 :id 为参数的占位符，需要通过 params:{} 方式赋值。有效地址例如：/course/detail/1 或者 /course/detail/2 等。

（2）URL参数的传递：

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

参数说明：

params 参数：会在URL中显示出传参的值，刷新页面不会丢失参数，使用该方式传值的时候，需要在路由提前配置好参数，如上述代码：path: '/course/detail/:id'，其中 :id 为参数的占位符。

query 参数：传递的参数会拼接在地址栏中（?name=xxx&teacher=xxx），刷新页面不会丢失参数，使用 path 和 name 都可以。

执行结果：

2、获取 URL 参数

（1）模板中获取URL参数：

<!-- 获取 params 对象中的参数 -->
<p>课程编号：{{ $route.params.id }}</p>

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

（2）JavaScript 中获取URL参数（Vue 2.0）：

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

（3）JavaScript 中获取URL参数（Vue 3.0 ）：

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);

执行结果：