vue路由跳转传参

 

Vue 路由跳转传参是在开发过程中常用的功能之一，通过路由参数可以在不同的页面间传递数据。下面将详细讲解 Vue 路由跳转传参的实现方法及相关知识。

 

一、传递参数的方式

在 Vue 路由中，传递参数有多种方式，主要包括通过路由路径传参和通过路由查询传参两种。下面将分别介绍这两种传参方式的实现方法。

 

1. 路由路径传参

路由路径传参是指通过在路由路径中添加参数来传递数据。在 Vue 路由中，可以在路由配置文件中的 path 属性中添加参数占位符，例如：

 

const router = [

{

path: '/user/:id'

 

component: User

}

]

当用户跳转到 '/user/123' 这个路由时，即可将参数 123 传递给 User 组件。在 User 组件中，可以通过 $route.params 获取传递的参数。

 

export default {

mounted() {

const id = this.$route.params.id

console.log(id) // 输出 123

}

}

通过路由路径传参的方式，可以将参数直接显示在浏览器地址栏中，不需要进行额外的处理。在实际开发中，常常用于用户登录、查看详情等场景。

 

2. 路由查询传参

路由查询传参是指在路由路径后面添加查询参数来传递数据。在 Vue 路由中，可以通过在路由路径后面添加查询参数来传递数据，例如：

 

const router = [

{

path: '/user'

 

component: User

}

]

当用户跳转到 '/user?id=123' 这个路由时，即可将参数 123 通过查询参数传递给 User 组件。在 User 组件中，可以通过 $route.query 获取传递的参数。

 

export default {

mounted() {

const id = this.$route.query.id

console.log(id) // 输出 123

}

}

通过路由查询传参的方式，参数不会显示在浏览器地址栏中，相对于路由路径传参更加安全，但是可以通过修改查询参数来传递参数。

 

二、如何在跳转时传递参数

在 Vue 路由中，可以通过编程式导航的方式在跳转时传递参数。在 Vue 组件中，可以使用 $router.push 方法进行页面跳转，并在参数中传递需要传递的参数。

 

1. 路由路径传参

通过路由路径传参的方式，在跳转时需要将参数添加到路由路径中。例如，我们要将参数 123 传递给 '/user' 这个路由，可以调用 $router.push 方法进行跳转，并在 path 参数中传递参数。

 

this.$router.push({

path: '/user/123'

})

通过上述代码，即可跳转到 '/user/123' 这个路由，将参数 123 传递给 User 组件。

 

2. 路由查询传参

通过路由查询传参的方式，在跳转时需要将参数添加到查询参数中。例如，我们要将参数 123 传递给 '/user' 这个路由，可以调用 $router.push 方法进行跳转，并在 query 参数中传递参数。

 

this.$router.push({

path: '/user'

 

query: {

id: 123

}

})

通过上述代码，即可跳转到 '/user?id=123' 这个路由，将参数 123 通过查询参数传递给 User 组件。

 

三、如何在接收参数时获取传递的参数

在 Vue 路由中，可以通过 $route 对象获取传递的参数。$route 对象是 Vue 实例的一个属性，包含了当前路由的信息，包括路径、参数、查询参数等。

 

1. 路由路径传参

通过路由路径传参的方式，在接收参数时使用 $route.params 获取传递的参数。例如：

 

export default {

mounted() {

const id = this.$route.params.id

console.log(id) // 输出 123

}

}

通过上述代码，即可获取到传递的参数 123。

 

2. 路由查询传参

通过路由查询传参的方式，在接收参数时使用 $route.query 获取传递的参数。例如：

 

export default {

mounted() {

const id = this.$route.query.id

console.log(id) // 输出 123

}

}

通过上述代码，即可获取到传递的参数 123。

 

四、动态路由传参

动态路由传参是指根据不同的参数动态生成路由。在 Vue 路由中，可以使用冒号 : 来定义动态路由。

 

const router = [

{

path: '/user/:id'

 

component: User

}

]

当用户跳转到 '/user/123' 这个路由时，即可动态生成路由，并将参数 123 传递给 User 组件。

 

通过动态路由传参的方式，可以根据参数的不同动态生成路由，提高代码的复用性。

 

五、总结

通过本文的介绍，我们了解到了在 Vue 路由中，实现路由跳转传参的方法及相关知识。主要包括通过路由路径传参和通过路由查询传参两种方式，在跳转时传递参数的方法，以及在接收参数时获取传递的参数的方法。在实际开发中，根据不同需求选择合适的方式进行传参，可以更好地完成页面间的数据交互。