在vue中实现一些页面引入公共组件

前言我们可以把公共组件放在App.vue中，但是有时候我们希望某个页面不需要写公共部分，那么怎么设置呢？本文介绍了在一些页面中引入公共组件的三种方法。方法一：使用子路由创建布局页面存放常用部分（header,footer,sidebar）给想使用router/index.js中public部分的页面添加子路由exportdefaultnewRouter({routes:[{path:"/",component:Layout,redirect:"/dashboard",children:[{name:"Dashboard",path:"dashboard",component:()=>import("@/views/home/Index")}]},{名称：“登录”，路径：“/登录”，组件：()=>import(“@/views/login/index”)}]});方法二：在App.vue配置要在router.js中显示公共组件的meta.keepAlive的值为true，否则为false{path:'/home',name:"Home",component:Home,meta:{keepAlive:true}},{path:'/login',name:　"Login",component:Login,meta:{keepAlive:false}},方法三：使用路由判断是否显示，在App.vue中使用v-if判断当前路由是否显示，使用watch监听路由变化