关于 : 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']
  }
},

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

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

使用方式 :

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

你可能感兴趣的:(vue.js,前端,javascript)