{"id":971,"date":"2022-03-18T14:51:52","date_gmt":"2022-03-18T06:51:52","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=971"},"modified":"2022-03-16T15:19:41","modified_gmt":"2022-03-16T07:19:41","slug":"vue-router%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=971","title":{"rendered":"vue-router(\u5b66\u4e60\u7b14\u8bb0)"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code><strong>1.\u9759\u6001\u8def\u7531-\u5199\u6b7b\u4e0d\u9700\u8981\u6539\u53d8\u90e8\u5206\u3002<\/strong>\n&lt;template>\n  &lt;div>\n   &lt;banner\/>\n  &lt;\/div>\n<meta charset=\"utf-8\">&lt;template>\n\n  import Banner from '.\/components\/Banner'\n   export default {\n     name:'App',\n     components:{Banner}\n   }\n\n-------------------------------------------\n<strong>\n2.\u52a8\u6001\u8def\u7531---\u7531\u914d\u7f6e\u8fdb\u884c\u52a8\u6001\u5207\u6362\u663e\u793a\u3002<\/strong>\n\n&lt;router-link to=\"\/about\"> \u8df3\u8f6cabout\u7ec4\u4ef6\uff0c\n &lt;router-view>&lt;\/router-view>\u6307\u5b9a\u7ec4\u4ef6\u7684\u5448\u73b0\u4f4d\u7f6e\n\n--------------------------------\n\n<strong>3.query: <\/strong>\n<strong>\nMessage.vue<\/strong>\n\n&lt;router-link :to=\"{\n                    path:'\/home\/message\/detail',\n\/\/\u8def\u7531\u547d\u540d:  name:'xiangqing',\n                    query:{\n                        id:m.id,\n                        title:m.title\n                    }\n\n                }\">\u8df3\u8f6c\u5230detail\u8be6\u60c5\u5e76\u4e14\u4f20\u9012query\u53c2\u6570\u5185\u5bb9\n                &lt;\/router-link>\n\n<strong>\ndetail.vue<\/strong>\n \/\/\u83b7\u53d6query\n&lt;li>\u6d88\u606f\u7f16\u53f7\uff1a{{$route.query.id}}&lt;\/li>\n&lt;li>\u6d88\u606f\u6807\u9898\uff1a{{$route.query.title}}&lt;\/li>\n----------------------------------------------\n\n<strong>4.\u8def\u7531\u53ef\u901a\u8fc7props\u4f20\u9012,<\/strong>\nrouter\/index.js\n\n{\n                    path:'message',\n                    component:Message,\n                    children:&#91;\n                        {\n                            name:'xiangqing',\n                            path:'detail',\n                            component:Detail,\n\n                            \/\/props\u7684\u7b2c\u4e00\u79cd\u5199\u6cd5\uff0c\u503c\u4e3a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4e2d\u7684\u6240\u6709key-value\u90fd\u4f1a\u4ee5props\u7684\u5f62\u5f0f\u4f20\u7ed9Detail\u7ec4\u4ef6\u3002\n                            \/\/ props:{a:1,b:'hello'}\n\n                            \/\/props\u7684\u7b2c\u4e8c\u79cd\u5199\u6cd5\uff0c\u503c\u4e3a\u5e03\u5c14\u503c\uff0c\u82e5\u5e03\u5c14\u503c\u4e3a\u771f\uff0c\u5c31\u4f1a\u628a\u8be5\u8def\u7531\u7ec4\u4ef6\u6536\u5230\u7684\u6240\u6709params\u53c2\u6570\uff0c\u4ee5props\u7684\u5f62\u5f0f\u4f20\u7ed9Detail\u7ec4\u4ef6\u3002\n                            \/\/ props:true\n\n                            \/\/props\u7684\u7b2c\u4e09\u79cd\u5199\u6cd5\uff0c\u503c\u4e3a\u51fd\u6570\n                            props($route){\n                                return {\n                                    id:$route.query.id,\n                                    title:$route.query.title,\n                                    a:1,\n                                    b:'hello'\n                                }\n                            }\n\n                        }\n                    ]\n                }\ndeaail.vue\n\n&lt;template>\n    &lt;ul>\n        &lt;li>\u6d88\u606f\u7f16\u53f7\uff1a{{id}}&lt;\/li>\n        &lt;li>\u6d88\u606f\u6807\u9898\uff1a{{title}}&lt;\/li>\n    &lt;\/ul>\n&lt;\/template>\n&lt;script>\n    export default {\n        name:'Detail',\n        props:&#91;'id','title'],\n    }\n&lt;\/script>\n\n\u5907\u6ce8\uff1a&lt;router-link>\u82e5\u901a\u8fc7params\u4f20\u9012\uff0c\u5219\u9700\u8981\u4f7f\u7528name\u800c\u4e0d\u662fpath\u3002\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,1],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/971"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=971"}],"version-history":[{"count":2,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/971\/revisions"}],"predecessor-version":[{"id":976,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/971\/revisions\/976"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}