应用场景:
①比如京东页面的首页、购物车、我的按钮,可以点击切换到对应的页面;
② 比如 Ant Design左侧这些按钮点击就会切到对应的页面,此时可以把左侧按钮放在父路由中,右侧的子路由
1.路由配置,子路由存放在children中,children中还能再嵌套children
const routes:Array<RouteRecordRaw> = [{path:"/user", //路径name:"Footer", //路由名称component:()=>import("../components/footer.vue"), //组件名,此处懒加载方式//子路由存放在children中children:[{path:"/user", //子路由路径name:"Login", //子路由名称component:()=>import("../components/login.vue")},{path:"/user/reg", name:"Reg",component:()=>import("../components/reg.vue")}]}
]
2.父级路由组件中使用 <router-view ></router-view>(根据url不同,展示不同内容给用户)
<template><router-view ></router-view><br>我是父路由<div><router-link to="/user" style="margin-right: 20px;">login</router-link><router-link to="/user/reg">reg</router-link></div>
</template>