首页 > 其他 > 详细

vue 名命视图

时间:2020-04-28 11:36:39      阅读:63      评论:0      收藏:0      [点我收藏+]

名命视图

在大多数组件中需要有header组件就可以这样写,减少header的引入  <router-view name="header" />    在配置中就可以控制显示隐藏。

  

1)在所有的组件中加入 <router-view name="header" />

<template>
    <div>
          <router-view  name="header" />
    </div>
</template>  

2)在router文件夹下的index.js中配置

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘
import Home from ‘../views/Home.vue‘

Vue.use(VueRouter)

  const routes = [
  {
    path: ‘/‘,
    name: ‘Home‘,
    component: Home,
    meta:{
      isShowNav:true
    },
    //通过在children中的components控制Header的显示隐藏
          children:[
           	path:"/",
                components:{
                       //根据需要加入Header组件,如果不需要的就不用加下边这行代码,这样就实现了控制是否显示Header组件
                        header:Header
                   }
             ]
  }
]

const router = new VueRouter({
  mode: ‘history‘,
  base: process.env.BASE_URL,
  routes
})

export default router

  

  

 

vue 名命视图

原文:https://www.cnblogs.com/xiaobu-wu/p/12792864.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!