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

77 阅读 0 评论 51 点赞

我是靠谱客的博主谨慎犀牛，最近开发中收集的这篇文章主要介绍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>