vue router-view使用详情

一、
router-view 组件作为vue最核心的路由管理组件，在项目中作为路由管理经常被使用到，vue项目最核心的App.vue文件中即是通过router-view进行路由管理

我们自己维护项目距的时候，也可以使用router-view组件进行路由管理，对于页面局部刷新的场景
该组件能发挥关键作用
二、使用方法
痛殴哦具体场景来介绍router-view组件用法
1.实现效果
通过切换底部导航栏进行页面内容区域切换
2 代码
最关键的是router.js配置：
{
path: "/routerViewPractice",
name: "routerViewPractice",
component: () => import("@/views/routerView/index.vue"),
redirect: '/messagePage',//页面默认加载的路由
children: [
{
path: "/messagePage",
name: "messagePage",
component: () => import("@/views/routerView/childPages/messagePage.vue")
},
{
path: "/contactPage",
name: "contactPage",
component: () => import("@/views/routerView/childPages/contactPage.vue")
},
{
path: "/dynamicPage",
name: "dynamicPage",
component: () => import("@/views/routerView/childPages/dynamicPage.vue")
}
]
}
文件说明：

routerViewPractice：父路由path；
redirect：页面router-view组件默认加载的路由；
children：用于父页面进行切换的子路由；
vue父页面代码：

使用this.$router.push进行页面上router-view组件的路由替换；实现点击底部导航栏页面切换功能；