{"id":964,"date":"2024-01-19T21:30:08","date_gmt":"2024-01-19T13:30:08","guid":{"rendered":"http:\/\/ericw.top\/?p=964"},"modified":"2024-01-19T21:31:33","modified_gmt":"2024-01-19T13:31:33","slug":"vue-%e6%a1%88%e4%be%8b-%e9%9d%a2%e8%af%95%e7%bb%8f%e9%aa%8c%e5%9f%ba%e7%a1%80%e7%89%88","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=964","title":{"rendered":"Vue \u6848\u4f8b \u9762\u8bd5\u7ecf\u9a8c\u57fa\u7840\u7248"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

\u6848\u4f8b\u5c55\u793a \u70b9\u51fb\u8fdb\u5165<\/a><\/p>\n\n\n\n

\u6b65\u9aa4\u53ca\u5176\u64cd\u4f5c\u65b9\u6cd5<\/mark><\/strong>\uff1a<\/p>\n\n\n\n

1\u3001\u914d\u4e00\u7ea7\u8def\u7531<\/strong><\/mark><\/h2>\n\n\n\n

\u9996\u5148\u68c0\u67e5\u6211\u4eec\u662f\u5426\u6709\u5404\u4e2a\u8def\u7531\u7ec4\u4ef6\uff0c\u7136\u540e\u6211\u4eec\u5728\u8def\u7531\u6a21\u5757<\/strong>\u914d\u7f6e\u4e00\u7ea7\u8def\u7531<\/strong>
\u64cd\u4f5c\u6b65\u9aa4\uff1a<\/strong>
1. \u5f15\u5165\u7ec4\u4ef6 import ... from .. <\/code>[\u89c1\u4e0b\u56fe1]<\/mark>
2. \u5728routes\u4e2d\u914d\u7f6e\u8def\u7531 path: '...', component: ...<\/code> [\u89c1\u4e0b\u56fe2]<\/mark>
3. \u7136\u540e\u914d\u7f6e\u9ed8\u8ba4\u9875\u9762 \u5c06Layout\u9875\u9762\u914d\u7f6e\u4e3a\u9ed8\u8ba4\u9875\u9762 <\/mark>path: '\/', component: Layout<\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

2\u3001\u914d\u4e8c\u7ea7\u8def\u7531<\/strong><\/mark><\/h2>\n\n\n\n

\u5728\u4e00\u7ea7\u8def\u7531\u4e0a\u9762 \u6dfb\u52a0 children<\/code> \u91cc\u9762\u6dfb\u52a0\u4e8c\u7ea7\u8def\u7531\uff0c\u914d\u7f6e\u89c4\u5219\uff0c\u4e4b\u540e\u914d\u7f6e\u8def\u7531\u51fa\u53e3\u548c\u5bfc\u822a\u9ad8\u4eae router-link<\/code>
\u64cd\u4f5c\u6b65\u9aa4\uff1a<\/strong>
1. \u9996\u5148\u914d\u7f6e\u8def\u7531\u89c4\u5219\uff0c\u5728\u4e00\u7ea7\u8def\u7531Layout<\/code>\u89c4\u5219\u5185\u7684children<\/code>\u4e2d\u914d\u7f6e\u4e8c\u7ea7\u8def\u7531\u89c4\u5219 [\u89c1\u4e0b\u56fe1]<\/mark>
2. \u914d\u7f6e\u4e8c\u7ea7\u8def\u7531\u51fa\u53e3\uff0c\u5728Layout\u7ec4\u4ef6\u4e2d\u914d\u7f6e\u4e8c\u7ea7\u8def\u7531\u51fa\u53e3 router-link<\/code> [\u89c1\u4e0b\u56fe2]<\/mark>
3. \u914d\u7f6e\u4e8c\u7ea7\u8def\u7531\u91cd\u5b9a\u5411\uff0c\u9ed8\u8ba4\u9875\u9762
4. \u5bfc\u822a\u9ad8\u4eae \u7ed9router-link<\/code>\u81ea\u5e26\u7c7b\u540d\u4e2d\u7684\u6a21\u7cca\u5339\u914d\uff0c\u8bbe\u7f6e\u9ad8\u4eae\u989c\u8272 [\u89c1\u4e0b\u56fe3]<\/mark><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

3\u3001\u9996\u9875\u6e32\u67d3\u8bf7\u6c42<\/strong><\/mark><\/h2>\n\n\n\n

axios \u8bf7\u6c42\u83b7\u53d6\u50a8\u5b58\u6570\u636e\uff0c\u7136\u540e\u4f7f\u7528v-for\u5c06\u50a8\u5b58\u597d\u7684\u6570\u636e\u6e32\u67d3\u5230\u9875\u9762
\u8bf7\u6c42\u5730\u5740  https:\/\/mock.boxuegu.com\/mock\/3083\/articles
\u8bf7\u6c42\u65b9\u5f0f  get
\u64cd\u4f5c\u6b65\u9aa4\uff1a<\/strong>
1. \u9996\u5148\u5bfc\u5165axios\u5305 [\u89c1\u4e0b\u56fe1]<\/mark>
2. \u4f7f\u7528axios\u8bf7\u6c42\u83b7\u53d6\u6570\u636e\uff0c\u5c06\u6570\u636e\u4fdd\u5b58\u5230 article \u6570\u7ec4\u6570\u636e\u4e2d [\u89c1\u4e0b\u56fe2][\u89c1\u4e0b\u4ee3\u78011]<\/mark>
3. \u4f7f\u7528v-for \u6e32\u67d3\u6570\u636e\u5230\u9875\u9762\uff0c\u5373\u53ef\u5b8c\u6210\u9875\u9762\u5c55\u793a [\u89c1\u4e0b\u56fe3]<\/mark><\/p>\n\n\n\n

async created() {\n    const res = await axios.get("https:\/\/mock.boxuegu.com\/mock\/3083\/articles");\n    this.article = res.data.result.rows;\n  }<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
4\u3001\u8df3\u8f6c\u4f20\u53c2\u5230\u8be6\u60c5\u9875\uff0c\u8be6\u60c5\u9875\u6e32\u67d3<\/strong><\/mark><\/h2>\n\n\n\n
\u63a5\u4e0b\u6765\uff0c\u5728\u6bcf\u4e2a\u9875\u9762\u6dfb\u52a0\u8df3\u8f6c\u6309\u94ae\uff0c\u8df3\u8f6c\u8fdb\u5165\u8be6\u60c5\u9875\uff0c\u4f20\u9012id\u53c2\u6570\u5230\u65b0\u9875\u9762\uff0c\u4e4b\u540e\u4f7f\u7528\u901a\u8fc7id\u67e5\u8be2\u8bf7\u6c42\u6765\u83b7\u53d6\u8be6\u60c5\u6570\u636e\uff0c\u4e4b\u540e\u5c06\u6570\u636e\u6e32\u67d3\u5230\u9875\u9762\u4e2d\u3002
\u63a5\u53e3\u5730\u5740\uff1a  https:\/\/mock.boxuegu.com\/mock\/3083\/articles\/:id
\u8bf7\u6c42\u65b9\u5f0f\uff1a  get
\u64cd\u4f5c\u6b65\u9aa4\uff1a<\/strong>
1. \u5728\u6587\u7ae0\u9875\u6dfb\u52a0\u70b9\u51fb\u76d1\u542c\uff0c\u5f53\u70b9\u51fb\u65f6\uff0c\u8df3\u8f6c\u4e00\u7ea7\u8def\u7531\u8be6\u60c5\u9875\uff0c\u4e4b\u540e\u5c06id\u4f7f\u7528\u52a8\u6001\u8def\u7531\u4f20\u9012\u53c2\u6570  [\u89c1\u4e0b\u56fe1]<\/mark>
2. \u5728\u8be6\u60c5\u9875\u4f7f\u7528axios<\/code>\u8bf7\u6c42\uff0c\u4f7f\u7528id<\/code>\u67e5\u8be2\u53c2\u6570\uff0c\u5c06\u6570\u636e\u4fdd\u5b58\u5230article<\/code>\u5bf9\u8c61\u4e2d  [\u89c1\u4e0b\u56fe2][\u89c1\u4e0b\u4ee3\u78011]<\/mark>
3. \u6700\u540e\u5c06\u6570\u636e\u62c9\u51fa\u6765\uff0c\u76f4\u63a5\u6a21\u677f\u5b57\u7b26\u4e32\u6e32\u67d3\u9875\u9762  [\u89c1\u4e0b\u56fe3]<\/mark>
4. \u6700\u540e\u7ed9\u8fd4\u56de\u6309\u94ae\u6dfb\u52a0\u70b9\u51fb\u76d1\u542c\u4e8b\u4ef6<\/p>\n\n\n\n
<script>\n\/\/ \u8bf7\u6c42\u5730\u5740: https:\/\/mock.boxuegu.com\/mock\/3083\/articles\/:id\n\/\/ \u8bf7\u6c42\u65b9\u5f0f: get\nimport axios from "axios";\nexport default {\n  name: "ArticleDetailPage",\n  data() {\n    return {\n      article: {},\n    };\n  },\n  async created() {\n    this.article = {};\n    const id = this.$route.params.id;\n    const { data } = await axios.get(\n      `https:\/\/mock.boxuegu.com\/mock\/3083\/articles\/${id}`\n    );\n    this.article = data.result;\n  },\n};\n<\/script><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
5\u3001\u7ec4\u4ef6\u7f13\u5b58\uff0c\u4f18\u5316\u6027\u80fd<\/strong><\/mark><\/h2>\n\n\n\n
\u6bcf\u6b21\u70b9\u51fb\u8fd4\u56de\u6309\u94ae\uff0c\u5e76\u4e0d\u4f1a\u56de\u5230\u521a\u521a\u6d4f\u89c8\u7684\u4f4d\u7f6e\uff0c\u6240\u4ee5\u6211\u4eec\u9700\u8981\u6dfb\u52a0\u7f13\u5b58\u9875\u9762\uff0c\u5c06\u6211\u4eec\u6ca1\u6709\u6d4f\u89c8\u7684\u9875\u9762\u7f13\u5b58\u8d77\u6765\uff0c\u7b49\u5230\u6211\u4eec\u9700\u8981\u6d4f\u89c8\u7684\u65f6\u5019\uff0c\u518d\u5c06\u7f13\u5b58\u63d0\u51fa\u6765\u7ee7\u7eed\u6d4f\u89c8\uff0c\u4f7f\u7528<keep-alive><\/code>\u6807\u7b7e\u3002
\u64cd\u4f5c\u6b65\u9aa4\uff1a<\/strong>
1. \u4f7f\u7528<keep-alive><\/code>\u6807\u7b7e\uff0c\u5c06\u6211\u4eec\u9700\u8981\u7f13\u5b58\u7684\u9875\u9762\u5305\u88f9
2. \u7ed9\u4ed6\u6dfb\u52a0\u5408\u9002\u7684\u5c5e\u6027\uff0c\u9009\u62e9\u7f13\u5b58\u7684\u9875\u9762  :include="['LayoutPage']"<\/code>  [\u89c1\u4e0b\u56fe2]<\/mark><\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\u6848\u4f8b\u5c55\u793a \u70b9\u51fb\u8fdb\u5165 \u6b65\u9aa4\u53ca\u5176\u64cd\u4f5c\u65b9\u6cd5\uff1a 1\u3001\u914d\u4e00\u7ea7\u8def\u7531 \u9996\u5148\u68c0\u67e5\u6211\u4eec\u662f\u5426\u6709\u5404\u4e2a\u8def\u7531\u7ec4\u4ef6\uff0c\u7136\u540e\u6211\u4eec\u5728\u8def\u7531\u6a21\u5757\u914d\u7f6e […]<\/p>\n","protected":false},"author":1,"featured_media":988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/964"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=964"}],"version-history":[{"count":12,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/964\/revisions"}],"predecessor-version":[{"id":992,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/964\/revisions\/992"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/988"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=964"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}