{"id":8633,"date":"2023-11-28T20:33:16","date_gmt":"2023-11-28T12:33:16","guid":{"rendered":"https:\/\/wx.kaifamiao.info\/?p=8633"},"modified":"2023-12-02T23:11:43","modified_gmt":"2023-12-02T15:11:43","slug":"vue-zhongroute-herouter-de-qu-bie","status":"publish","type":"post","link":"http:\/\/wx.kaifamiao.info\/index.php\/2023\/11\/28\/vue-zhongroute-herouter-de-qu-bie\/","title":{"rendered":"Vue \u4e2d route \u548c router \u7684\u533a\u522b\uff1f"},"content":{"rendered":"<p>\u5728 Vue \u4e2d\uff0c\u901a\u5e38\u4f7f\u7528 Vue Router \u6765\u7ba1\u7406\u5e94\u7528\u7a0b\u5e8f\u7684\u8def\u7531\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c<code>route<\/code> \u548c <code>router<\/code> \u662f Vue Router \u4e2d\u7684\u4e24\u4e2a\u91cd\u8981\u6982\u5ff5\uff0c\u5b83\u4eec\u8868\u793a\u4e0d\u540c\u7684\u6982\u5ff5\u548c\u529f\u80fd\u3002<\/p>\n<h3><a id=\"route%EF%BC%88%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%EF%BC%89\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>Route\uff08\u8def\u7531\u5bf9\u8c61\uff09<\/h3>\n<p><code>route<\/code> \u662f Vue Router \u4e2d\u7684\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8868\u793a\u5f53\u524d\u6d3b\u8dc3\u7684\u8def\u7531\u4fe1\u606f\u3002\u5b83\u5305\u542b\u4e86\u5f53\u524d URL \u5339\u914d\u5230\u7684\u8def\u7531\u4fe1\u606f\uff0c\u5305\u62ec\u8def\u7531\u7684\u8def\u5f84\u3001\u53c2\u6570\u3001\u67e5\u8be2\u53c2\u6570\u3001\u5143\u4fe1\u606f\u7b49\u3002<code>route<\/code> \u5bf9\u8c61\u4f1a\u968f\u7740\u8def\u7531\u7684\u5bfc\u822a\u800c\u53d8\u5316\uff0c\u5728 Vue \u7ec4\u4ef6\u4e2d\u53ef\u4ee5\u901a\u8fc7 <code>$route<\/code> \u8bbf\u95ee\u5f53\u524d\u7684\u8def\u7531\u4fe1\u606f\u3002<\/p>\n<pre><code class=\"language-javascript\">export default {\n  created() {\n    console.log(this.<span class=\"katex math inline\">route.path); \/\/ \u5f53\u524d\u8def\u7531\u8def\u5f84\n    console.log(this.<\/span>route.params); \/\/ \u5f53\u524d\u8def\u7531\u53c2\u6570\n    console.log(this.$route.query); \/\/ \u5f53\u524d\u8def\u7531\u67e5\u8be2\u53c2\u6570\n    \/\/ ...\n  }\n};\n<\/code><\/pre>\n<h3><a id=\"router%EF%BC%88%E8%B7%AF%E7%94%B1%E5%99%A8%EF%BC%89\" class=\"anchor\" aria-hidden=\"true\"><span class=\"octicon octicon-link\"><\/span><\/a>Router\uff08\u8def\u7531\u5668\uff09<\/h3>\n<p><code>router<\/code> \u662f Vue Router \u7684\u5b9e\u4f8b\uff0c\u5b83\u8d1f\u8d23\u7ba1\u7406\u5e94\u7528\u7a0b\u5e8f\u7684\u8def\u7531\u914d\u7f6e\u3001\u5bfc\u822a\u7b49\u529f\u80fd\u3002<code>router<\/code> \u5b9e\u4f8b\u5305\u542b\u4e86\u8def\u7531\u914d\u7f6e\u4fe1\u606f\u3001\u8def\u7531\u7684\u5339\u914d\u89c4\u5219\u3001\u8def\u7531\u5bfc\u822a\u7684\u65b9\u6cd5\u7b49\uff0c\u53ef\u4ee5\u901a\u8fc7\u5b83\u6765\u8fdb\u884c\u8def\u7531\u7684\u8df3\u8f6c\u3001\u5bfc\u822a\u5b88\u536b\u7684\u6ce8\u518c\u7b49\u64cd\u4f5c\u3002<\/p>\n<pre><code class=\"language-javascript\">import Vue from 'vue';\nimport VueRouter from 'vue-router';\n\nVue.use(VueRouter);\n\nconst router = new VueRouter({\n  routes: [\n    \/\/ \u8def\u7531\u914d\u7f6e\u4fe1\u606f\n    { path: '\/', component: Home },\n    { path: '\/about', component: About }\n    \/\/ ...\n  ]\n});\n\nexport default router;\n<\/code><\/pre>\n<p>\u603b\u7ed3\u6765\u8bf4\uff0c<code>route<\/code> \u662f\u8868\u793a\u5f53\u524d\u6d3b\u8dc3\u7684\u8def\u7531\u4fe1\u606f\u7684\u5bf9\u8c61\uff0c\u800c <code>router<\/code> \u662f Vue Router \u7684\u5b9e\u4f8b\uff0c\u8d1f\u8d23\u6574\u4e2a\u8def\u7531\u7cfb\u7edf\u7684\u7ba1\u7406\u548c\u63a7\u5236\uff0c\u5305\u62ec\u8def\u7531\u7684\u914d\u7f6e\u3001\u5339\u914d\u3001\u5bfc\u822a\u7b49\u529f\u80fd\u3002<code>route<\/code> \u662f <code>router<\/code> \u7684\u4e00\u4e2a\u5c5e\u6027\uff0c\u8868\u793a\u5f53\u524d\u7684\u8def\u7531\u72b6\u6001\u4fe1\u606f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728 Vue \u4e2d\uff0c\u901a\u5e38\u4f7f\u7528 Vue Router \u6765\u7ba1\u7406\u5e94\u7528\u7a0b\u5e8f\u7684\u8def\u7531\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0croute \u548c route [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114],"tags":[],"class_list":["post-8633","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/8633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/comments?post=8633"}],"version-history":[{"count":2,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/8633\/revisions"}],"predecessor-version":[{"id":14143,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/8633\/revisions\/14143"}],"wp:attachment":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/media?parent=8633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/categories?post=8633"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/tags?post=8633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}