前言

咱们能够把公共组件放到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>