通过$route.mete.show实现组件动态展示

最新推荐文章于 2022-12-10 14:42:00 发布

my sweet heart

最新推荐文章于 2022-12-10 14:42:00 发布

阅读量337

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41552648/article/details/125808397

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

{
    path: '/register',
    component: Register,
    meta: {
      isHideFooter: true
    }
  },
  {
    path: '/login',
    component: Login,
    meta: {
      isHideFooter: true
    },

<template>
  <div>
    <Header />
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
    <!-- 在Home与Search可见的，但是Login|Register不可见 -->
    <!-- 利用路由元信息解决当前问题好处：一行代码就可以解决 -->
    <Footer v-show="$route.meta.isShow" />
  </div>
</template>

<script>
//引入Header与Footer非路由组件
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  name: "",
  data() {
    return {
      msg: "abc"
    }
  },
  components: {
    Header,
    Footer,
  },
  mounted() {
    //派发一个action||获取商品分类的三级列表的数据
    this.$store.dispatch("getCategoryList");
  },
};
</script>

<style scoped></style>