vue 嵌套路由

简单例子

编写子组件

<template>
  <h3>UserPosts个人岗位组件:{{$route.params.id}}</h3>
</template>

<script>
export default {
  name: "UserPosts"
}
</script>

<style scoped>

</style>

另外一个差不多

编写父组件

注意在父路由需要去渲染子路由

<template>
  <div>
    <h3>User ID :{{$route.params.id}}</h3>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "Users"
}
</script>

<style scoped>

</style>

路由配置

通过children来配置子路由

{
    path: '/user/:id',//链接地址
    name: 'User',//别名
    component: Users,//加载的组件,
    //配置子路由
    children:[
      {
        path:'profile',
        component:UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  },

效果