vuerouter-查看详解

#page-title{宽度：100%；背景色：#fff；显示：弹性；justify-content:center;}.backImg{width:20px;}1.简介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',//页面默认加载的路由.vue")},{路径:"/contactPage",名称:"contactPage",组件:()=>import("@/views/routerView/childPages/contactPage.vue")},{路径:"/dynamicPage",name:"dynamicPage",component:()=>import("@/views/routerView/childPages/dynamicPage.vue")}]}文件描述:routerViewPractice：父路由路径；redirect：页面router-view组件加载的默认路由；children：父页面切换的子路由；vue父页面代码：#page-title{宽度：100%；背景色：#fff；显示：弹性；justify-content:center;}.backImg{width:20px;}使用this.$router.push对页面上的router-view组件路由替换；实现点击底部导航栏的页面切换功能；