Vue.js 从vue-router的链接中获取’id’的值

在本文中，我们将介绍如何使用Vue.js从vue-router的链接中获取’id’的值。Vue.js是一个流行的JavaScript框架，用于构建用户界面。它提供了一种简洁的方式来处理动态路由和链接参数。

vue-router

在使用Vue.js开发单页应用程序时，一个重要的库是vue-router。它是Vue.js官方的路由管理器，可以方便地进行页面之间的导航。vue-router允许我们定义路由，创建链接和展示页面。

创建带有参数的路由

在Vue.js的路由中，我们可以定义带有参数的路由。通过在路由路径中添加动态的片段，我们可以使用不同的参数值来访问相同的组件。下面是一个示例：

const routes = [
  {
    path: '/user/:id',
    component: User
  }
]

在上面的示例中，我们定义了一个带有参数’id’的路由。这意味着我们可以通过/user/1、/user/2等来访问同一个User组件，只是参数值不同。

在链接中传递参数

现在我们知道了如何创建带有参数的路由，接下来让我们看看如何在链接中传递参数。vue-router提供了一种简单的方式来生成包含参数的链接。

<router-link :to="'/user/' + userId">{{ userName }}</router-link>

在上面的示例中，我们使用’:to’绑定属性来动态生成链接。使用’+’/user/’ + userId’，我们可以将参数值添加到链接中。

在组件中获取参数值

现在我们已经了解了如何在链接中传递参数，让我们看看如何在Vue组件中获取参数值。vue-router提供了一个$route对象，可以访问当前路由的信息，包括参数。

this.$route.params.id

在上面的示例中，我们使用 $this.$ route.params.id来获取名为’id’的参数值。我们可以在组件的生命周期钩子函数中使用它，例如created或mounted。

下面是一个完整的示例，演示了如何从vue-router的链接中获取’id’的值：

<template>
  <div>
    <router-link :to="'/user/' + userId">{{ userName }}</router-link>
    <div>User ID: {{ userId }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 1,
      userName: 'John Doe'
    }
  },
  created() {
    this.userId = this.$route.params.id;
  }
}
</script>