vue路由传参的详解1.命名路由的传参和取出2.query传参和取出3.meta传参和取出4.其他方式5.注意点 代码和注释

Vue是一款流行的前端框架，其路由功能可以帮助我们实现单页应用（SPA）的跳转和页面切换。在实际开发中，我们会遇到需要在路由之间传递参数的情况，本篇博客将详细介绍Vue路由传参和取出参数的几种方式。

1. 命名路由的传参和取出

在定义路由时，我们可以给路由起一个名称，例如：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User
  }
]
1
2
3
4
5
6
7

在跳转时，我们可以使用$router.push方法传递参数：

this.$router.push({ name: 'user', params: { id: 123 }})
1

在接收参数的组件中，可以通过$route.params来获取参数：

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出 123
  }
}
1
2
3
4
5

2. query传参和取出

除了使用命名路由传递参数外，我们还可以使用query参数传递参数。在跳转时，我们可以使用$router.push方法传递参数：

this.$router.push({ path: '/user', query: { id: 123 }})
1

在接收参数的组件中，可以通过$route.query来获取参数：

export default {
  mounted() {
    console.log(this.$route.query.id) // 输出 123
  }
}
1
2
3
4
5

3. meta传参和取出

在定义路由时，我们可以在路由元信息（meta）中定义参数，例如：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    meta: {
      title: '用户详情'
    }
  }
]
1
2
3
4
5
6
7
8
9
10

在接收参数的组件中，可以通过$route.meta来获取参数：

export default {
  mounted() {
    console.log(this.$route.meta.title) // 输出 用户详情
  }
}
1
2
3
4
5

4. 其他方式

除了以上三种方式外，我们还可以使用props传递参数。在定义路由时，我们可以将参数作为props传递给组件：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    props: true
  }
]
1
2
3
4
5
6
7
8

在接收参数的组件中，可以通过props来获取参数：

export default {
  props: ['id'],
  mounted() {
    console.log(this.id) // 输出 123
  }
}
1
2
3
4
5
6

5. 注意点

在使用路由传参时，我们需要注意以下几点：

• 在使用命名路由传参时，参数需要在路由路径中定义，例如/user/:id。
• 在使用query参数传参时，参数会以查询字符串的形式出现在URL中，例如/user?id=123。
• 在使用meta参数传参时，参数需要在路由元信息中定义。
• 在使用props传参时，需要在路由中将props设置为true。
• 在跳转时，我们可以使用$router.push方法或者组件。
• 在接收参数时，我们可以通过$route.params、$route.query、$route.meta或者props来获取参数。

以上就是Vue路由传参和取出参数的详细介绍，希望对大家有所帮助。