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>