关于 ： vue路由的运用-route

通过： 全局路由设置参数：
页面进行控制的思想。

一、页面头部标题：自定义样式 和 普通样式的使用
通过使用参数，判断是否是自定义样式：

<com-header
      v-if="!$route.meta.hiddenHeader"
      :title="$route.name ? $t('route.' + $route.name) : ''"
      :nav-style="$route.meta.navStyle"
    />

// 1、hiddenHeader
// 2、name
// 3、navStyle

// 路由-参数
{
  path: '/MonthlySwapList',
  name: 'MonthlySwapList',
  component: () => import( /* webpackChunkName: "MonthlySwapList" */ '@/views/MonthlySwapList'),
  meta: {
    title: '换电电量统计',
    keepAlive: false,
    navStyle: 'transparent',
    langModule: ['swappingOrder', 'cycleOrder']
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、国际
语言包，分模块请求使用
配合路由守卫：

beforeRouteEnter: async(to, from, next) => {
    const langModule = (to.meta.langModule || [])
},
1
2
3

使用方式 ：

// dom 中
<com-header v-if="!$route.meta.hiddenHeader" >
// js 中
this.$route.meta.hiddenHeader
1
2
3
4