请简述vue-router 动态路由是什么？

Vue面试题 5月前 0 181

Vue-router 的动态路由主要是指路由的路径中包含动态部分，也就是说，我们可以在一个路由中插入一些变量。

动态路由主要用于处理 URL 参数，使我们能够创建一个路由来匹配任意路径，其中包含的参数可以在 Vue 组件中获取。

例如，我们可能有一个用户组件，用于显示用户的详细信息。每个用户都有一个唯一的 ID。我们可以创建一个动态路由来匹配 “/user/:id”，其中 “:id” 是一个动态的部分，可以匹配任意的用户 ID：

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

这样，当我们访问 “/user/123” 时，Vue-router 会显示 User 组件，并将 “123” 作为参数传递给它。

在 User 组件中，我们可以使用 $route.params.id 来获取用户 ID：

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

这种方式使得我们能够使用同一个组件来显示不同的用户，而不需要为每个用户都创建一个单独的路由和组件，从而简化了代码的复杂性并提高了代码的重用性。