使用路由元信息判断显示或隐藏

最新推荐文章于 2023-11-02 10:21:50 发布

xx820702

最新推荐文章于 2023-11-02 10:21:50 发布

阅读量583

点赞数

分类专栏： vue2 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/xx820702/article/details/124736408

版权

vue2 专栏收录该内容

63 篇文章 1 订阅

订阅专栏

这是一个关于Vue.js应用程序的基础结构示例，展示了如何在App.vue中引入公共头部组件CommonHeader，并使用Vue Router配置路由，包括登录页面和首页。在首页中，通过嵌套路由显示Home组件。同时，对不同路由设置了元信息（meta）来控制组件的显示。

摘要由CSDN通过智能技术生成

App.vue

<template>
<div>
  <common-header  v-show="$route.meta.show"/>
  <div id="app">
  <router-view></router-view>
  </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader";
export default {
  components: { CommonHeader },

}
</script>

<style  lang="less">
 #app{
   height: 100vh;
   overflow: hidden;
 }

</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: () => import('@/views/login/login.vue'),
      meta: {
        title: '登录', isfirst: false,show:false
      }
    },
  {
      path: '/',
      component: () => import('@/views/Main.vue'),
      children: [
        {
          path: '/home',
          name: 'home',
          component: () => import('@/views/Home/Home'),
          meta:{title:'首页',show:true}
        },
]
}
]