vue中实现部分页面引入公共组件

前言

我们可以把公共组件放到App.vue中，但是有时候我们希望某个页面不需要这写公共部分，那么需要怎么设置呢？

本文为大家介绍三种部分页面引入公共组件的方法。

方法一：利用子路由

• 创建一个layout页面来存放公共部分（页头、页脚、侧边栏）

  <!-- Layout -->
  <template>
    <div class="">
      <el-container>
        <el-header></el-header>
        <el-container>
          <el-aside width="200px"></el-aside>
          <el-main><router-view /></el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  

• 在router/index.js中给想使用公共部分的页面添加子路由

  export default new Router({
        
        
    routes: [
      {
        
        
        path: "/",
        component: Layout,
        redirect: "/dashboard",
        children: [
          {
        
        
            name: "Dashboard",
            path: "dashboard",
            component: () => import("@/views/home/Index")
          }
        ]
      },
      {
        
        
        name: "Login",
        path: "/login",
        component: () => import("@/views/login/index")
      }
    ]
  });
  
  

方法二：结合$route.meta

• 在App.vue中

<template>
  <div id="app">
    <div v-if="$route.meta.keepAlive">
        <el-header></el-header>
        <router-view></router-view>
    </div>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

• 在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来监听路由的改变

  <template>
      <div id="app">
          <home-header v-if="!(path ==='/login') "></home-header>
          <home-aside v-if="!(path ==='/login')"></home-aside>
          <router-view/>
      </div>
  </template>
   
  <script>
      import HomeHeader from './components/header/Header'
      import HomeAside from './components/aside/Aside'
      export default {
          name: 'App',
          data(){
              return{
                  path:''
              }
          },
          components: {
              HomeHeader,
              HomeAside,
          },
          // 判断路由
          mounted() {
            this.path = this.$route.path;
            // console.log(this.$route.path)
          },
          watch:{
              $route(to,from){
                  this.path = to.path
              }
          }
      }
  </script>
  <style>
  </style>