使用Vue Router连接动态ID

Vue Router是Vue.js官方的路由管理器，它允许我们通过URL来控制页面的显示。在Vue Router中，我们可以使用动态路由从URL中获取一个参数，这个参数可以用来显示不同的页面内容，比如根据ID显示不同的用户信息页面。

创建动态路由

在Vue Router中，我们可以使用冒号(:)来标记一个动态路由，如下所示：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

在路由路径中使用冒号(:)来标记动态参数，这里我们使用了:id作为参数名，并指定了该路由的组件为User。

获取动态路由参数

在User组件中，我们可以通过this.$route.params.id来获取动态路由中的参数。下面是一个简单的例子：

<template>
  <div>
    <h2>User {{ $route.params.id }}</h2>
  </div>
</template>

<script>
export default {
  
}
</script>

我们可以在组件中使用this.$route.params.id来获取动态路由中的ID参数，并将其显示在页面中。

动态链接

在我们使用动态路由时，通常需要生成一个带有ID参数的链接，以便用户可以进行页面跳转。在Vue中，我们可以使用router-link组件来生成带有参数的链接。

<router-link :to="{ name: 'user', params: { id: 123 }}">User 123</router-link>

这里我们使用了路由名称'name'来指定跳转的路由，params属性用来传递动态参数。最终生成的链接为/user/123。

总结

Vue Router允许我们使用动态路由获取URL中的参数，以控制页面显示。我们可以使用$route.params来获取动态路由参数，并使用router-link组件生成带有参数的链接。