{"id":361,"date":"2020-03-01T22:51:03","date_gmt":"2020-03-01T14:51:03","guid":{"rendered":"http:\/\/blog.doublejia.cn\/?p=361"},"modified":"2020-03-25T23:00:03","modified_gmt":"2020-03-25T15:00:03","slug":"vue-%e8%b8%a9%e5%9d%91","status":"publish","type":"post","link":"https:\/\/blog.doublejia.cn\/?p=361","title":{"rendered":"VUE \u8e29\u5751"},"content":{"rendered":"\n<ul><li>Router \u9519\u8bef<\/li><\/ul>\n\n\n\n<p>\u95ee\u9898\uff1aUncaught (in promise) NavigationDuplicated&nbsp;{_name: \"NavigationDuplicated\", name: \"NavigationDuplicated\", message: \"Navigating to current location (\"xxxxx\") is not allowed\", stack: \"Error    at new NavigationDuplicated (webpack-int\u2026\/node_modules\/vue\/dist\/vue.runtime.esm.js:4213:7)\"}<br><br>\u89e3\u51b3\u529e\u6cd5<br>1. vue-router \u5207\u6362\u5230 3.0 \u7248\u672c<br>2. \u5728 router.js \u52a0\u5165<\/p>\n\n\n\n<div class=\"is-layout-flow wp-block-group has-very-light-gray-background-color has-background\"><div class=\"wp-block-group__inner-container\">\n<pre class=\"wp-block-preformatted\">const originalPush = Router.prototype.push\nRouter.prototype.push = function push(location) {\n  return originalPush.call(this, location).catch(err =&gt; err);\n}<\/pre>\n<\/div><\/div>\n\n\n\n<p>\u95ee\u9898\u539f\u56e0\uff1a\u5728\u65b0\u7248\u672c\u7684 vue-router(3.1x) \u91cc\uff0c\u540c\u4e00\u4e2a\u8def\u7531\u4e0d\u80fd\u88ab\u591a\u6b21\u6dfb\u52a0\u3002\u5b9e\u5728\u4e0d\u77e5\u9053\u4e3a\u4ec0\u4e48\u4f1a\u6709\u8fd9\u79cd\u8bbe\u5b9a\u3002<\/p>\n\n\n\n<p>\u51fa\u5904\uff1a <a href=\"https:\/\/blog.csdn.net\/XUELUO123456789\/article\/details\/103147494\" target=\"_blank\"  rel=\"nofollow\" >https:\/\/blog.csdn.net\/XUELUO123456789\/article\/details\/103147494<\/a> <\/p>\n\n\n\n<ul><li>Axios \u7684\u540c\u6b65\u8bf7\u6c42<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>async function(){\n    await axios({url: 'xxxx'})\n    .then(res=&gt;{\n        \/\/ to do.\n    })\n}<\/code><\/pre>\n\n\n\n<ul><li>Vue-i18n \u4ece\u670d\u52a1\u5668\u83b7\u53d6<\/li><\/ul>\n\n\n\n<p>\u9ed8\u8ba4\u7684\u4f7f\u7528\u65b9\u6cd5<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\n\nVue.use(VueI18n)\n\nfunction loadLocaleMessages () {\n  const locales = require.context('.\/locales', true, \/[A-Za-z0-9-_,\\s]+\\.json$\/i)\n  const messages = {}\n  locales.keys().forEach(key =&gt; {\n    const matched = key.match(\/([A-Za-z0-9-_]+)\\.\/i)\n    if (matched &amp;&amp; matched.length &gt; 1) {\n      const locale = matched[1]\n      messages[locale] = locales(key)\n    }\n  })\n  return messages\n}\n\nexport default new VueI18n({\n  locale: process.env.VUE_APP_I18N_LOCALE || 'en',\n  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',\n  messages: loadLocaleMessages()\n})\n<\/code><\/pre>\n\n\n\n<p>\u4f7f\u7528 axios \u7684\u65b9\u6cd5\u3002\u91cd\u70b9\u662f mergeLocaleMessage \u65b9\u6cd5\uff0c\u53ef\u4ee5\u91cd\u65b0\u8bbe\u7f6e\u5bf9\u5e94\u7684\u8bed\u8a00\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Vue from 'vue';\nimport VueI18n from 'vue-i18n';\nimport axios from \"axios\";\n\nVue.use(VueI18n)\n\n\nlet obj = new VueI18n({\n    locale: process.env.VUE_APP_I18N_LOCALE || 'en',\n    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',\n});\n\naxios({\n    url: 'xxxxx',\n})\n.then(res=&gt;{\n    for (let key in res.data) {\n        obj.mergeLocaleMessage(key, res.data[key]);\n    }\n})\n\nexport default obj;<\/code><\/pre>\n\n\n\n<ul><li>slot | scope-slot | v-slot<\/li><\/ul>\n\n\n\n<p>\u63d2\u69fd\uff0c\u53ef\u4ee5\u5411\u5b50\u63a7\u4ef6\u4e2d\u52a0\u5165\u81ea\u5b9a\u4e49\u7684\u5185\u5bb9\u3002<br>scope-slot \u53ef\u4ee5\u7ed9\u81ea\u5b9a\u4e49\u5185\u5bb9\u7684\u65f6\u5019\u52a0\u5165\u56de\u8c03\u3002\u6587\u6863\u91cc\u4ecb\u7ecd\uff0c\u4ece2.6.0\u5f00\u59cb\uff0c\u5c06\u6210\u4e3a\u5f03\u7528\u3002Vue 3.0 \u5c06\u4e0d\u518d\u652f\u6301\u3002\u53ef\u4ee5\u7528 v-slot \u4ee3\u66ff\u3002\u4f46\u8981\u6ce8\u610f\uff0cv-slot \u53ea\u80fd\u5e94\u7528\u4e8e &lt;template&gt; \u6807\u8bb0\u3002<br><br>\u5728\u4f7f\u7528 render \u65f6\uff0cslot \u548c scope-slot \u662f2\u4e2a\u5bf9\u8c61\u3002this.$slots \u548c this. scopedSlots \u3002\u6bd4\u5982\uff0c\u5728\u4f7f\u7528\u65f6:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template v-slot:default=\"obj\"&gt;{{obj.msg}}&lt;\/template&gt;<\/code><\/pre>\n\n\n\n<p>\u5728render \u91cc:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>render(h){\n    return h('div', {}, &#091;\n        this.$scopedSlots.default({\n            msg: \"Hello World\"\n        })\n    ]);\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Router \u9519\u8bef \u95ee\u9898\uff1aUncaught (in promise) NavigationDuplicated&nbsp;{_name: &#8220;NavigationDuplicated&#8221;, name: &#8220;NavigationDuplicated&#8221;, message: &#8220;Navigating to current location (&#8220;xxxxx&#8221;) is not allowed&#8221;, stack: &#8220;E\u2026<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,1],"tags":[18],"_links":{"self":[{"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=\/wp\/v2\/posts\/361"}],"collection":[{"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=361"}],"version-history":[{"count":7,"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions"}],"predecessor-version":[{"id":390,"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions\/390"}],"wp:attachment":[{"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.doublejia.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}