vue中动态路由

在Vue中，可以通过动态路由来实现根据不同的参数生成不同的路由。常见的场景是根据用户的ID生成不同的用户详情页路由。

首先，在router/index.js文件中，需要配置一个动态路由，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import User from '@/views/User.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
})

在上面的代码中，我们配置了一个动态路由/user/:id，其中:id表示参数的占位符。

然后，在User.vue组件中，可以通过$route.params来获取URL中的参数值，如下所示：

<template>
  <div>
    <h1>User Detail</h1>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  // ...
}
</script>

在上面的代码中，我们通过$route.params.id来获取URL中的id参数的值，并将其显示在模板中。

当访问/user/1时，将会渲染User组件，并显示User ID: 1的内容。