{"id":811,"date":"2021-08-17T10:49:21","date_gmt":"2021-08-17T02:49:21","guid":{"rendered":"https:\/\/fireinsect.top\/?p=811"},"modified":"2021-08-18T11:42:15","modified_gmt":"2021-08-18T03:42:15","slug":"vue%e5%80%bcrouter%ef%bc%88%e8%b7%af%e7%94%b1%ef%bc%892","status":"publish","type":"post","link":"https:\/\/fireinsect.top\/index.php\/2021\/08\/17\/vue%e5%80%bcrouter%ef%bc%88%e8%b7%af%e7%94%b1%ef%bc%892\/","title":{"rendered":"Vue\u503cRouter\uff08\u8def\u7531\uff092"},"content":{"rendered":"\n<p>\u5728\u8def\u7531\u4e2d\uff0c\u6211\u4eec\u9664\u4e86\u53ef\u4ee5\u5728 &lt;router-link&gt;\u4e2d\u5199\u5165a\u6807\u7b7e\u6765\u5b9a\u4e49\u5bfc\u822a\u94fe\u63a5\uff0c\u8fd8\u53ef\u4ee5\u501f\u52a9 Router\u5b9e\u4f8b\u65b9\u6cd5\uff0c\u901a\u8fc7\u7f16\u7a0b\u4ee3\u7801\u6765\u5b9e\u73b0<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u7f16\u7a0b\u5f0f\u5bfc\u822a<\/p>\n\n\n\n<p>\u4e24\u79cd\u4ee3\u7801\u6837\u5f0f<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">\u58f0\u660e\u5f0f<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u7f16\u7a0b\u5f0f<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">&lt;router-link :to=&#8221;&#8230;&#8221;&gt;<\/td><td class=\"has-text-align-center\" data-align=\"center\">router.push(&#8230;)<\/td><\/tr><\/tbody><\/table><figcaption>\u56e0\u4e3aVue\u5b9e\u4f8b\u5185\u90e8\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7$router\u8bbf\u95ee Router\u7684\u5b9e\u4f8b\uff0c\u6240\u4ee5Router\u7684\u5b9e\u4f8b\u65b9\u6cd5push\u53ef\u4ee5\u7528 this.$router.push(&#8230;)\u8c03\u7528<\/figcaption><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">router.push\u4f7f\u7528\u65b9\u6cd5<\/p>\n\n\n\n<p class=\"has-medium-font-size\">\u4e00\u3001router.push\u7684\u53c2\u6570\u4e3a\u5b57\u7b26\u4e32\u8def\u5f84<\/p>\n\n\n\n<p>router.push\u65b9\u6cd5\u662f\u53c2\u6570\u53ef\u4ee5\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\u8def\u5f84<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">router.push('user')\nrouter.push('\/user')\n<code>router.push('user') router.push('\/user')router.push('user') router.push('\/user')<\/code><\/code><\/pre>\n\n\n\n<p>\u4e0b\u9762\u8be6\u7ec6\u8bf4\u660e\u4e0a\u9762\u4e24\u79cd\u5199\u6cd5\u7684\u4e0d\u540c\uff0c\u4e3b\u8981\u662f\u8df3\u8f6c\u540e url \u7684\u53d8\u5316\u4e0d\u540c\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>\u539f url<\/td><td>localhost:8080<\/td><td>localhost:8080\/home<\/td><\/tr><tr><td>router.push(&#8216;user&#8217;)<br>\u8df3\u8f6c\u540e\u7684 url<\/td><td>localhost:8080\/user<\/td><td>localhost:8080\/home\/user<\/td><\/tr><tr><td>router.push(&#8216;\/user&#8217;)<br>\u8df3\u8f6c\u540e\u7684 url<\/td><td>localhost:8080\/user<\/td><td>localhost:8080\/user<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u56e0\u4e3a&nbsp;<code>\/<\/code>&nbsp;\u610f\u5473\u7740\u5339\u914d\u6839\u8def\u7531\uff0c\u6240\u4ee5&nbsp;<code>'\/user'<\/code>&nbsp;\u8fd9\u6837\u7684\u5199\u6cd5\u4e0d\u7ba1\u539f\u8def\u5f84&nbsp;<code>localhost:8080\/??<\/code>&nbsp;\u4e2d\u7684&nbsp;<code>??<\/code>&nbsp;\u662f\u4ec0\u4e48\uff0c\u8df3\u8f6c\u540e url \u90fd\u4f1a\u53d8\u4e3a&nbsp;<code>localhost:8080\/user<\/code>\u3002<\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"\u4e8c\u3001routerpush-\u7684\u53c2\u6570\u4e3a\u63cf\u8ff0\u5730\u5740\u7684\u5bf9\u8c61\">\u4e8c\u3001router.push \u7684\u53c2\u6570\u4e3a\u63cf\u8ff0\u5730\u5740\u7684\u5bf9\u8c61<\/h4>\n\n\n\n<p>router.push \u65b9\u6cd5\u7684\u53c2\u6570\u53ef\u4ee5\u662f\u4e00\u4e2a\u63cf\u8ff0\u5730\u5740\u7684\u5bf9\u8c61\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ \u5bf9\u8c61<\/em>\n<em>\/\/ \u8fd9\u79cd\u5199\u6cd5\u548c\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u53c2\u6570\u4e00\u6837<\/em>\nrouter.push({ path: 'home' })\n\n<em>\/\/ \u547d\u540d\u7684\u8def\u7531<\/em>\nrouter.push({ name: 'user', params: { userId: '123' }})\n\n<em>\/\/ \u5e26\u67e5\u8be2\u53c2\u6570\uff0c\u53d8\u6210 \/register?plan=private<\/em>\nrouter.push({ path: 'register', query: { plan: 'private' }})\n<\/code><\/pre>\n\n\n\n<p>\u53ea\u63d0\u4f9b&nbsp;<code>path<\/code>&nbsp;\u503c\u7684\u53c2\u6570\u548c\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u53c2\u6570\u662f\u4e00\u6837\u7684\u3002\u8fd9\u91cc\u5c31\u4e0d\u518d\u8bf4\u4e86\u3002\u6211\u4eec\u4e3b\u8981\u770b\u4e00\u4e0b\u540e\u4e24\u79cd\u5199\u6cd5\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><code>{ name: 'user', params: { userId: '123' }}<\/code><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li>\u5bf9\u5e94\u7684<strong>\u547d\u540d\u8def\u7531<\/strong>\u4e3a\uff1a&nbsp;<code>{ path:'user\/:userId', name:'user' }<\/code>\uff1b<\/li><li>\u8df3\u8f6c\u540e url\uff1a<code>localhost:8080\/user\/123<\/code>\uff1b<\/li><li>\u53d6\u53c2\u6570\uff1a<code>$route.params.userId<\/code>\uff1b<br><\/li><\/ul>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li><code>{ path: 'register', query: { plan: 'private' }}<\/code><\/li><\/ol>\n\n\n\n<ul class=\"wp-block-list\"><li>\u5bf9\u5e94\u7684\u8def\u7531\u4e3a\uff1a&nbsp;<code>{ path:'register' }<\/code>\uff1b<\/li><li>\u8df3\u8f6c\u540e url\uff1a<code>localhost:8080\/register?plan=private<\/code>\uff1b<\/li><li>\u53d6\u53c2\u6570\uff1a<code>$route.query.plan<\/code>\uff1b<\/li><\/ul>\n\n\n\n<p>\u5c0f\u7ed3\u4e00\u4e0b\u53c2\u6570\u4f20\u9012\u7684\u5bf9\u5e94\u89c4\u5219\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>name \u5bf9\u5e94 params\uff0c\u8def\u5f84\u5f62\u5f0f\uff1auser\/123\uff1b<\/li><li>path \u5bf9\u5e94 query\uff0c\u8def\u5f84\u5f62\u5f0f\uff1auser?id=123\uff1b<\/li><\/ul>\n\n\n\n<p>\u5982\u679c\u4f7f\u7528 path \u8fdb\u884c\u9875\u9762\u8df3\u8f6c\u7684\u65f6\u5019\uff0c\u5199 params \u8fdb\u884c\u4f20\u53c2\u4f1a\u88ab\u5ffd\u7565\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ params \u4f1a\u88ab\u5ffd<\/em>\nrouter.push({ path: 'user', params: { userId: '123' }})\n<\/code><\/pre>\n\n\n\n<p>\u53ef\u4ee5\u6362\u6210\u4e0b\u9762\u7684\u5199\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">router.push({ path: 'user\/123'})\n<\/code><\/pre>\n\n\n\n<p>\u540c\u6837\u7684\u89c4\u5219\u4e5f\u9002\u7528\u4e8e&nbsp;<code>router-link<\/code>&nbsp;\u7ec4\u4ef6\u7684&nbsp;<code>to<\/code>&nbsp;\u5c5e\u6027\u3002<\/p>\n\n\n\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"has-vivid-red-color has-text-color has-medium-font-size wp-block-heading\" id=\"\u9875\u9762\u8df3\u8f6c\u540e\u5982\u4f55\u83b7\u53d6\u53c2\u6570\">\u9875\u9762\u8df3\u8f6c\u540e\u5982\u4f55\u83b7\u53d6\u53c2\u6570<\/h3>\n\n\n\n<p>\u4f8b\u5982\u5de5\u7a0b<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><em>\/\/ $route<\/em>\n{\n  <em>\/\/ \u8def\u7531\u540d\u79f0<\/em>\n  name: \"user\",\n  meta: {},\n  <em>\/\/ \u8def\u7531path<\/em>\n  path: \"\/user\/123\",\n  <em>\/\/ \u7f51\u9875\u4f4d\u7f6e\u6307\u5b9a\u6807\u8bc6\u7b26<\/em>\n  hash: \"#abc\",\n  <em>\/\/ window.location.search<\/em>\n  query: {name: \"userName\"},\n  <em>\/\/ \u8def\u5f84\u53c2\u6570 user\/:userId<\/em>\n  params: {userId: \"123\"},\n  fullPath: \"\/user\/123?name=userName#abc\"\n}<\/code><\/pre>\n\n\n\n<p>\u6211\u4eec\u4ee5<code>http:\/\/localhost:8080\/user\/123?name=userName#abc<\/code> \u5730\u5740\u6765\u8bbf\u95ee<\/p>\n\n\n\n<p>\u53ef\u4ee5\u901a\u8fc7<code> $route.query<\/code>\u3001<code>$route.params<\/code>\u3001<code>$route.hash<\/code>\u6765\u83b7\u53d6\u53c2\u6570<\/p>\n\n\n\n<div style=\"height:52px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u91cd\u5b9a\u5411\u4e0e\u522b\u540d<\/p>\n\n\n\n<p style=\"font-size:25px\">\u522b\u540d<\/p>\n\n\n\n<p>\u522b\u540d\u6307\u4e24\u4e2a\u540d\u5b57\u6307\u5411\u4e00\u4e2a\u8def\u7531\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><strong>const<\/strong> routes: [\n  <em>\/\/ \u5b9a\u4e49 alias \u5c5e\u6027<\/em>\n  { path: '\/a', alias: '\/b', component: A }\n];<\/code><\/pre>\n\n\n\n<p>\u5373\u8bbf\u95ee \/a \u548c \/b \u90fd\u4f1a\u6e32\u67d3 A<\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p style=\"font-size:25px\">\u91cd\u5b9a\u5411<\/p>\n\n\n\n<p>\u91cd\u5b9a\u5411\u6307\u7684\u662f\u8def\u7531\u8df3\u8f6c\uff0c\u5982 \/a \u91cd\u5b9a\u5411\u5230 \/b \uff0c\u5373\u8bbf\u95ee \/a  \u65f6\uff0curl\u81ea\u52a8\u8df3\u8f6c\u5230 \/b \u5e76\u5339\u914d \/b\u8def\u7531<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><strong>const<\/strong> routes: [\n  <em>\/\/ \u5b9a\u4e49 redirect \u5c5e\u6027\uff0c\u5c06 \/a \u91cd\u5b9a\u5411\u5230 \/b<\/em>\n  { path: '\/a', redirect: '\/b' }\n]<\/code><\/pre>\n\n\n\n<div style=\"height:28px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u76d1\u542c\u8def\u7531<\/p>\n\n\n\n<p>\u5f53\u5934\u90e8\u6807\u7b7e\u5207\u6362\u65f6\uff0c\u8def\u5f84\u4e5f\u4f1a\u53d1\u751f\u53d8\u5316\uff0c\u6211\u4eec\u9700\u8981\u76d1\u542c\u8def\u5f84\u53d8\u5316\u6765\u6539\u53d8\u6807\u7b7e\u6837\u5f0f\uff0c\u6216\u8005\u52a0\u8f7d\u5bf9\u5e94\u7684\u5185\u5bb9\u3002<\/p>\n\n\n\n<p>\u6211\u4eec\u5229\u7528 watch \u548c $router \u6765\u5b8c\u6210\u76d1\u542c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">watch: {\n  $route(to,<strong>from<\/strong>){\n    console.log(to, <strong>from<\/strong>);\n  }\n}\n\n<em>\/\/ \u6216\u8005<\/em>\nwatch: {\n  $route: {\n    handler: <strong>function<\/strong>(to,<strong>from<\/strong>) {\n      console.log(to,<strong>from<\/strong>);\n    },\n    <em>\/\/ \u6df1\u5ea6\u89c2\u5bdf\u76d1\u542c<\/em>\n    deep: true\n  }\n},<\/code><\/pre>\n\n\n\n<p>\u5b9a\u4e49\u70b9\u51fb\u4e8b\u4ef6\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n<strong>export<\/strong> <strong>default<\/strong> {\n  methods: {\n    <em>\/\/ \u70b9\u51fb tab \u65f6\u4f1a\u6267\u884c changeTab \u65b9\u6cd5<\/em>\n    <strong>changeTab<\/strong>(type) {\n      <em>\/\/ \u4f7f\u7528 Router \u5b9e\u4f8b\u65b9\u6cd5\u6539\u53d8\u8def\u5f84\u53c2\u6570<\/em>\n      this.$router.push({ query: { type: type } });\n    }\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u66f4\u65b0\u6807\u7b7e\u6837\u5f0f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n<strong>export<\/strong> <strong>default<\/strong> {\n  watch: {\n    $route(to, <strong>from<\/strong>) {\n      <em>\/\/ \u8def\u7531\u53d8\u5316\u4e86\u5c31\u6267\u884c\u66f4\u65b0\u6837\u5f0f\u7684\u65b9\u6cd5<\/em>\n      this.updateTab();\n      console.log(to, <strong>from<\/strong>);\n    }\n  },\n  methods: {\n    <strong>changeTab<\/strong>(type) {\n      this.$router.push({ query: { type: type } });\n    },\n    <em>\/\/ \u66f4\u65b0\u6837\u5f0f\u7684\u65b9\u6cd5<\/em>\n    <strong>updateTab<\/strong>() {\n      this.tabList.map(menu =&gt; {\n        menu.active = menu.type === this.$route.query.type;\n      });\n    }\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u56e0\u4e3a\u6211\u4eec\u6b64\u65f6\u9ed8\u8ba4\u8def\u5f84\u5f00\u59cb\u6ca1\u6709\u53c2\u6570type\uff0c\u6240\u4ee5\u9ed8\u8ba4\u9009\u62e9\u7b2c\u4e00\u4e2a\uff0c\u4f46\u5f53\u8def\u5f84\u9ed8\u8ba4\u6709\u521d\u59cb\u53c2\u6570\uff0c\u6211\u4eec\u5c31\u9700\u8981\u9a6c\u4e0a\u66f4\u65b0\u6837\u5f0f<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&gt;\n<strong>export<\/strong> <strong>default<\/strong> {\n  methods: {\n    <em>\/\/ ...<\/em>\n    <strong>updateTab<\/strong>() {\n      <strong>if<\/strong> (!this.$route.query.type) {\n        <strong>return<\/strong>;\n      }\n      this.tabList.map(tab =&gt; {\n        tab.active = tab.type === this.$route.query.type;\n      })\n    }\n  }\n};\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-large-font-size\">\u7f51\u7edc\u8bf7\u6c42 async\u4e0e await<\/p>\n\n\n\n<p>\u5728js\u4e2d\uff0c\u6211\u4eec\u8fdb\u884c\u7f51\u7edc\u8bf7\u6c42\u90fd\u662f\u901a\u8fc7\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">fetch(\n  'https:\/\/www.fastmock.site\/mock\/b73a1b9229212a9a3749e046b1e70285\/f4\/f4-11-1-1'\n)\n  .then(<strong>function<\/strong>(response) {\n    <strong>return<\/strong> response.json();\n  })\n  .then(<strong>function<\/strong>(myJson) {\n    console.log(myJson);\n  });<\/code><\/pre>\n\n\n\n<p>\u56e0\u4e3afetch\u662f\u4e00\u4e2apromise\u5bf9\u8c61\uff0c\u65e0\u7b49\u5f85\uff0c\u6240\u4ee5\u5bf9\u8fd4\u56de\u6570\u636e\u8fdb\u884c\u64cd\u4f5c\u65f6\u8981\u6dfb\u52a0\u5927\u91cfthen\u3002<\/p>\n\n\n\n<p style=\"font-size:25px\">\u6240\u4ee5\u6211\u4eec\u4f7f\u7528 async\uff08\u5f02\u6b65\uff09\u548cawait\uff08\u7b49\u5f85\u5f02\u6b65\uff09<\/p>\n\n\n\n<p>\u4f7f\u7528async\u524d\u6211\u4eec\u9700\u8981\u58f0\u660e\u4e00\u4e2a\u5f02\u6b65function<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><strong>async<\/strong> <strong>function<\/strong> <strong>asyncFn<\/strong>() {\n  <strong>return<\/strong> {\n    \"company\": \"\u4f18\u8bfe\u8fbe\",\n    \"slogan\": \"\u5b66\u7684\u6bd4\u522b\u4eba\u597d\u4e00\u70b9\"\n  };\n}\n\n<strong>const<\/strong> result = asyncFn();\nconsole.log(result);<\/code><\/pre>\n\n\n\n<p>async\u8fd4\u56de\u7684\u4e5f\u662f\u4e00\u4e2apromise\u5bf9\u8c61\uff0c\u4f46\u5176\u4e0efetch\u533a\u522b\u5728\u6709\u7740await<\/p>\n\n\n\n<p><code>await<\/code>\u00a0\u7528\u4e8e\u7b49\u5f85\u4e00\u4e2a\u5f02\u6b65\u65b9\u6cd5\u6267\u884c\u7684\u5b8c\u6210\uff0c\u5b83\u4f1a\u963b\u585e\u540e\u9762\u7684\u4ee3\u7801\uff0c\u7b49\u7740 Promise \u5bf9\u8c61 resolve\u00a0<sup>*<\/sup>\uff0c\u7136\u540e\u5f97\u5230 resolve \u7684\u503c\uff0c\u4f5c\u4e3a await \u8868\u8fbe\u5f0f\u7684\u8fd0\u7b97\u7ed3\u679c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>async<\/strong> <strong>function<\/strong> <strong>getAsyncFn<\/strong>() {\n  <strong>const<\/strong> result = <strong>await<\/strong> asyncFn();\n  console.log(result);\n}\n\ngetAsyncFn();<\/code><\/pre>\n\n\n\n<p>\u6ce8\u610f\u7684\u662f await\u53ea\u80fd\u51fa\u73b0\u5728 async\u51fd\u6570\u4e2d<\/p>\n\n\n\n<div style=\"height:11px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-medium-font-size\">\u591a\u4e2a\u8bf7\u6c42\u5e76\u53d1\u6267\u884c<\/p>\n\n\n\n<p>\u5982\u8981\u662f\u591a\u4e2a\u8bf7\u6c42\u5e76\u53d1\u6267\u884c \u53ef\u4ee5\u4f7f\u7528 Promise.all<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\"><strong>async<\/strong> <strong>function<\/strong> <strong>asyncFn1<\/strong>() {\n  <strong>return<\/strong> \"\u4f18\u8bfe\u8fbe\";\n}\n\n<strong>async<\/strong> <strong>function<\/strong> <strong>asyncFn2<\/strong>() {\n  <strong>return<\/strong> \"\u5b66\u7684\u6bd4\u522b\u4eba\u597d\u4e00\u70b9\";\n}\n\n<strong>async<\/strong> <strong>function<\/strong> <strong>getAsyncFn<\/strong>() {\n  <strong>const<\/strong> result = <strong>await<\/strong> Promise.all([asyncFn1(), asyncFn2()]);\n  console.log(result);\n}\n\ngetAsyncFn();<\/code><\/pre>\n\n\n\n<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\u8bf7\u6c42\u53c2\u6570\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;script&gt;\n<strong>export<\/strong> <strong>default<\/strong> {\n  data: <strong>function<\/strong>() {\n    <strong>return<\/strong> {\n      courseList: []\n    };\n  },\n  <strong>async<\/strong> <strong>mounted<\/strong>() {\n    <em>\/\/ \u5728\u751f\u547d\u5468\u671f mounted \u4e2d\u8c03\u7528\u83b7\u53d6\u8bfe\u7a0b\u4fe1\u606f\u7684\u65b9\u6cd5<\/em>\n    <strong>await<\/strong> this.queryAllCourse();\n  },\n  methods: {\n    <em>\/\/ \u5728 methods \u5bf9\u8c61\u4e2d\u5b9a\u4e49\u4e00\u4e2a async \u5f02\u6b65\u51fd\u6570<\/em>\n    <strong>async<\/strong> <strong>queryAllCourse<\/strong>() {\n      <em>\/\/ \u5728 fetch \u4e2d\u4f20\u5165\u63a5\u53e3\u5730\u5740<\/em>\n      <strong>const<\/strong> res = <strong>await<\/strong> fetch('https:\/\/www.fastmock.site\/mock\/2c5613db3f13a5c02f552c9bb7e6620b\/f5\/api\/queryallcourse');\n      <em>\/\/ \u5c06\u6587\u672c\u4f53\u89e3\u6790\u4e3a JSON \u683c\u5f0f\u7684promise\u5bf9\u8c61<\/em>\n      <strong>const<\/strong> myJson = <strong>await<\/strong> res.json();\n      <em>\/\/ \u83b7\u53d6\u8fd4\u56de\u6570\u636e\u4e2d\u7684 data \u8d4b\u503c\u7ed9 courseList<\/em>\n      this.courseList = myJson.data;\n    }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u4f20\u9012\u53c2\u6570\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;script&gt;\n<strong>export<\/strong> <strong>default<\/strong> {\n  data: <strong>function<\/strong>() {\n    <strong>return<\/strong> {\n      course: []\n    };\n  },\n  <strong>async<\/strong> <strong>mounted<\/strong>() {\n    <strong>await<\/strong> this.getCourse();\n  },\n  methods: {\n    <strong>async<\/strong> <strong>getCourse<\/strong>() {\n      <em>\/\/ \u4ece\u8def\u5f84\u4e2d\u83b7\u53d6\u8bfe\u7a0b id<\/em>\n      <strong>const<\/strong> courseId = this.$route.params.courseId\n      <em>\/\/ \u5728\u63a5\u53e3\u5730\u5740\u540e\u4f20\u5165\u53c2\u6570 id<\/em>\n      <strong>const<\/strong> res = <strong>await<\/strong> fetch('https:\/\/www.fastmock.site\/mock\/2c5613db3f13a5c02f552c9bb7e6620b\/f5\/api\/getcourse?id=${' + courseId + '}');\n      <strong>const<\/strong> myJson = <strong>await<\/strong> res.json();\n      this.course = myJson.data;\n    }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u8def\u7531\u4e2d\uff0c\u6211\u4eec\u9664\u4e86\u53ef\u4ee5\u5728 &lt;router-link&gt;\u4e2d\u5199\u5165a\u6807\u7b7e\u6765\u5b9a\u4e49\u5bfc\u822a\u94fe\u63a5\uff0c\u8fd8\u53ef\u4ee5\u501f\u52a9 Rou [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-811","post","type-post","status-publish","format-standard","hentry","category-5"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/811"}],"collection":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/comments?post=811"}],"version-history":[{"count":9,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/811\/revisions"}],"predecessor-version":[{"id":824,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/posts\/811\/revisions\/824"}],"wp:attachment":[{"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/media?parent=811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/categories?post=811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fireinsect.top\/index.php\/wp-json\/wp\/v2\/tags?post=811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}