renren-fast-vue框架

使用记录：

renren-fast-vue框架

---

内容：

登录拦截

1. 路由过滤

前段所有路由跳转都会经过beforeEach方法，to传入为当前路由信息，to.path可以获取到路由地址，如果要跳过登录，可以判断当前路由是否要跳过，是则return next()，不是跳转到对应login页面：return next({ name: ‘login’ })

router.beforeEach((to, from, next) => {
  if(不需要登录){
  return next()
  }else{
  //需要登录的
  return next({ name: 'login' })
  //实际情况中还需要判断当前路由情况，
  }
})

next()方法可以传参数，参数则为要跳转的路由

3. 路由配置

const router = new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: pageRoutes.concat(moduleRoutes)
})

路由配置：
mode模式： hash时，路径为：http://localhost:8001/#/home
history时，路径为：http://localhost:8001/home
主要区别就是：
hash时，beforeEach方法中，to.path一直为/，需要在登录或者登录后，通过做配置来识别出当前路由url路径。
history时，beforeEach方法中，to.path为/home，则可以轻松获取到当前路由中url

4. 数据字典

export function getDictLabel (dictType, dictValue) {
  const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
  if (type) {
    const val = type.dataList.find((element) => (element.dictValue === dictValue + ''))
    if (val) {
      return val.dictLabel
    } else {
      return dictValue
    }
  } else {
    return dictValue
  }
}

vue挂载到全局

Vue.prototype.$getDictLabel = getDictLabel

使用方法：

<el-table-column prop="accessType" :label="$t('device.accessType')" header-align="center" align="center">
          <template slot-scope="scope">
            {{ $getDictLabel("access_type", scope.row.accessType) }}
          </template>
        </el-table-column>

传入数据字典中设置的字典值，以及要转换的字典类型的值，显示转换后的值

5. 自带弹窗（ 新增 / 修改）

<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

使用：

<el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>

通过全局加载：

// 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },

好处就是通过一个组件加载就可以打开新增或者修改页面，页面名称保持一致，如：**-add-or-update.vue
当然需要全局所有页面查询相关的主键只能使用id，不能自定义，不然就获取不到，或者打开失败，数据获取失败等情况。

6. 关于$t(‘upload.text’)

<el-form-item prop="deviceLoginName" :label="$t('device.deviceLoginName')">
        <el-input v-model="dataForm.loginName" :placeholder="$t('device.deviceLoginName')"></el-input>
      </el-form-item>

$t通过vue加载使用

declare module 'vue/types/vue' {
  interface Vue {
    readonly $i18n: VueI18n & IVueI18n;
    $t: typeof VueI18n.prototype.t;
    $tc: typeof VueI18n.prototype.tc;
    $te: typeof VueI18n.prototype.te;
    $d: typeof VueI18n.prototype.d;
    $n: typeof VueI18n.prototype.n;
  }
}