vue子路由

一.在路由的基础上增加children子路由

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path:'/user/:id',
      name:UserHome,
      component:UserHome,
      children:[
        {
          path:"id",
          component:UserId

        },
        {
          path:"name",
          component:UserName

        }
      ]

    },
    {
      path: "/home/:id",
      component: HomePage,

    },
    {
      path: "/about:/id",
      component: AboutPage,
    }
  ],
});

二 在父函数的基础上增加 才能让子路由界面显示出来

三 在App,vue里面增加父路由，然后在父路由的基础上绑定子路由

<template>
<div>
  <router-link to="/user/12">User</router-link><br>
  <router-link to="/user/13">User</router-link><br>
  //字符串拼接注意是左右各一个斜杠，不然匹配补上路径
  <router-link v-bind:to="'/user/'+$route.params.id+'/id'">12号id</router-link>----
  <router-link v-bind:to="'/user/'+$route.params.id+'/name'">12号名字</router-link>
  <!-- <router-link :to="{name:UserHome,params:{userid:'12',username:cz}}">Userid</router-link><br> -->
  <router-view></router-view>
</div>