vue 路由 获取参数

一、什么是Vue路由

Vue路由是Vue.js官方推荐的前端路由库，它可以帮助我们在单页面应用中实现页面之间的跳转和参数传递。Vue路由使用了浏览器自带的history模式或hash模式来管理页面的跳转，同时提供了一些方便的API来获取和传递参数。

二、Vue路由参数的类型

在Vue路由中，参数可以分为两种类型：动态路由参数和查询参数。 1. 动态路由参数

动态路由参数是指在路由路径中的一部分是可变的，比如我们可以定义一个路径为/user/:id，其中:id就是动态路由参数。在实际应用中，这个参数可以是用户的ID、商品的ID等等。我们可以通过动态路由参数来实现根据不同的参数值显示不同的内容。 2. 查询参数

查询参数是指在URL中以?开头的参数，比如/user?id=1，其中id就是查询参数。查询参数一般用于传递一些可选的参数，比如分页参数、搜索关键字等等。查询参数可以通过路由的query属性来获取。

三、获取动态路由参数

在Vue路由中，我们可以通过$route对象来获取动态路由参数。 1. this.$route.params

this.$route.params是一个对象，它包含了当前路由的动态路由参数。我们可以通

过它来获取动态路由参数的值。

// 假设我们定义了一个路径为/user/:id的路由 // 当前路径为/user/1

console.log(this.$route.params.id); // 输出1

2. 监听路由参数的变化

如果我们需要在参数发生变化时执行一些操作，可以使用watch来监听$route对象的变化。

watch: {

'$route.params.id': {

handler(newVal, oldVal) {

// 参数发生变化时执行的操作 },

immediate: true // 立即执行handler } }

四、获取查询参数

在Vue路由中，我们可以通过$route对象的query属性来获取查询参数。

// 假设当前URL是/user?id=1&name=John

console.log(this.$route.query.id); // 输出1

console.log(this.$route.query.name); // 输出John

五、在路由跳转中传递参数

除了获取参数，我们还可以在路由跳转中传递参数。Vue路由提供了两种方式来传递参数：动态路由参数和查询参数。 1. 动态路由参数

我们可以在router-link中使用:to属性来传递动态路由参数。

User

2. 查询参数

我们可以在router-link中使用:to属性来传递查询参数。

User

六、总结

通过本文的介绍，我们了解了Vue路由中获取参数的方法。动态路由参数和查询参数分别适用于不同的场景，我们可以根据具体需求选择合适的参数传递方式。掌握了这些方法，我们就可以在Vue路由中灵活地获取和传递参数，实现更加强大和灵活的页面跳转功能。