Vue.js 中获取路由参数

在 Vue.js 中，路由参数是通过 $route 对象访问的。$route 对象提供了有关当前路由的信息，包括路由参数。

如何获取路由参数

要获取路由参数，可以使用以下方法：

立即学习“前端免费学习笔记（深入）”；

1. 使用 $route.params 对象：

   // props 接收到的路由参数props: ['id'],data() {  return {    id: this.$route.params.id  }}

2. 使用 this.$route.params 属性：

   // this 接收到的路由参数data() {  return {    id: this.$route.params['id']  }}

3. 在计算属性中使用 $route.params：

   computed: {  id() {    return this.$route.params.id  }}

示例

以下是一个获取路由参数的示例：

<template><div>    <h1>当前 ID：{{ id }}</h1>  </div></template><script>export default {  props: ['id'],  data() {     return {       id: this.$route.params.id     }   }}</script>

以上组件将渲染一个带有 id 的

标签，该 id 是从路由参数中获取的。

注意：