1-7 路由懒加载和meta

路由懒加载

作用:减少首页渲染的时候

{
    path: '/about',
    name: 'About',
    component: ()=>import("../views/About.vue")
}

路由元信息

一、配置

{
    path: '/',
    name: 'home',
    component: () => import('@/views/Home'),
    meta: {
      keepAlive: true
    }
 }

使用这个可以做到让导航条在有meta的页面显示,没有meta的页面不显示

Tips:设置路由懒加载之后,App.vue中的this就拿到不路由的路径了

利用meta实现导航条在detail页面的隐藏

# 1、router/index.js 让显示导航条的路由设置meta，isNav=true
const routes = [
  {
    path: '/films',
    name: 'Films',
    component:Films,
    meta:{
      isNav:true
    }
  },
  {
    path: '/article',
    name: 'About',
    component:Aritcle,
    meta:{
      isNav:true
    }
  },{
    path:"/center",
    name:"Center",
    component:Center,
    meta:{
      isNav:true
    }
  },{
    path:"/movie/:id",
    name:"MovieDetail",
    component:MovieDetail
  }
]

# 2、App.vue中获取meta,去设置导航
<template>
  <div id="app">
    <!-- <tar-bar v-if="this.$route.meta.isNav"></tar-bar> -->
    <tar-bar v-if="isShow"></tar-bar>
    <router-view />
  </div>
</template>
<script>
import TarBar from '@/components/TarBar.vue'
export default {
  components:{
    TarBar
  },
  mounted(){
    console.log(this.$route)
  },
  computed:{
    isShow(){
      return this.$route.meta.isNav
    }
  }
};
</script>