详解Vue如何通过URL传递与获取参数
作者：pan_junbiao
前言
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>该路由配置的 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);执行结果：
到此这篇关于详解Vue如何通过URL传递与获取参数的文章就介绍到这了,更多相关Vue URL传递与获取参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！