重庆网站建设培训个人网站设计及实现论文

应用场景：

①比如京东页面的首页、购物车、我的按钮，可以点击切换到对应的页面；

② 比如 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>