VUE 踩坑

• Router 错误

问题：Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("xxxxx") is not allowed", stack: "Error at new NavigationDuplicated (webpack-int…/node_modules/vue/dist/vue.runtime.esm.js:4213:7)"}

解决办法
1. vue-router 切换到 3.0 版本
2. 在 router.js 加入

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
}

问题原因：在新版本的 vue-router(3.1x) 里，同一个路由不能被多次添加。实在不知道为什么会有这种设定。

出处： https://blog.csdn.net/XUELUO123456789/article/details/103147494

• Axios 的同步请求

async function(){
    await axios({url: 'xxxx'})
    .then(res=>{
        // to do.
    })
}

• Vue-i18n 从服务器获取

默认的使用方法

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

使用 axios 的方法。重点是 mergeLocaleMessage 方法，可以重新设置对应的语言。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import axios from "axios";

Vue.use(VueI18n)


let obj = new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
});

axios({
    url: 'xxxxx',
})
.then(res=>{
    for (let key in res.data) {
        obj.mergeLocaleMessage(key, res.data[key]);
    }
})

export default obj;

• slot | scope-slot | v-slot

插槽，可以向子控件中加入自定义的内容。
scope-slot 可以给自定义内容的时候加入回调。文档里介绍，从2.6.0开始，将成为弃用。Vue 3.0 将不再支持。可以用 v-slot 代替。但要注意，v-slot 只能应用于 <template> 标记。

在使用 render 时，slot 和 scope-slot 是2个对象。this.$slots 和 this. scopedSlots 。比如，在使用时:

<template v-slot:default="obj">{{obj.msg}}</template>

在render 里:

render(h){
    return h('div', {}, [
        this.$scopedSlots.default({
            msg: "Hello World"
        })
    ]);
}