linux创建文件 观察者模式 azure unix service swift3 jboss stream EaselJS vue中文 jq点击事件 jq遍历元素 jquery获取dom对象 jquery使用ajax java常用的包 yml文件注释 excel带格式复制粘贴 flutter 缺点 python中的index java基础教学 java字符 迷宫解锁 脚本之家 陌陌电脑直播设置教程 js文件上传 正当防卫4存档 蜘蛛皮肤 python延时函数 oracle表分区 打印机怎么打印照片 刷新当前页面 戴尔键盘灯怎么开 firework软件 lol特效盒子 包图小白体 安全设置 清泉流响哪里爆率高 pr怎么倒放 去除数组中的重复元素 千分之一符号怎么打
当前位置: 首页 > 学习教程  > 编程语言

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

2020/11/4 14:23:02 文章标签:

前言 我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法。 方法一:利用子路由 创建一个layout页面来存放公共部分&#xff0…

前言

我们可以把公共组件放到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>
    

本文链接: http://www.dtmao.cc/news_show_350127.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?