{"id":1439,"date":"2019-10-01T23:57:42","date_gmt":"2019-10-01T15:57:42","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1439"},"modified":"2022-02-17T14:52:00","modified_gmt":"2022-02-17T06:52:00","slug":"2020ironman-svelte-routing","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/10\/01\/2020ironman-svelte-routing\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY30-\u8def\u7531"},"content":{"rendered":"

routing<\/h1>\n

routing \u8def\u7531\u662f\u7b2c\u4e09\u5341\u5929\u8981\u5206\u4eab\u7d66\u5927\u5bb6\u7684 svelte \u6587\u7ae0\uff0c\u4e0d\u904e\u9019\u500b\u5957\u4ef6\u4e0d\u662f\u5b98\u65b9\u7528\u6cd5\uff0c svelte \u7684\u5b98\u65b9\u7528\u6cd5\u662f sapper<\/a> \u9019\u500b\u6846\u67b6\u4e0d\u904e\u7b46\u8005\u6c92\u5be6\u969b\u7528\u904e\uff0c\u5f85\u4e4b\u5f8c\u4f7f\u7528\u904e\u518d\u5206\u4eab\u7d66\u5927\u5bb6\u3002\u6240\u4ee5\u63a5\u4e0b\u4f86\u5148\u8ddf\u5927\u5bb6\u4ecb\u7d39\u4e00\u4e0bsvelte-routing<\/a>\u9019\u500b\u5957\u4ef6\u3002<\/p>\n

<\/p>\n

routing \u662f\u505a\u751a\u9ebc\u7528\u7684<\/h2>\n

\u8def\u7531\u662f\u505a\u751a\u9ebc\u7528\u7684\uff0c\u7c21\u55ae\u8b1b\u5c31\u662f\u5c07\u4f60\u5c0e\u5230\u4f60\u8981\u5230\u7684\u5730\u65b9\uff0c\u76f8\u4fe1\u6709\u770b\u904e\u7b46\u8005\u4e4b\u524d\u7684flask rest routing<\/a>\u7684\u6587\u7ae0\u5c31\u662f\u4e00\u500bserver side\u7684\u8def\u7531\u7c21\u55ae\u8aaa\u660e\u5c31\u662f\u900f\u904eurl\u4e0a\u7684\u898f\u5247\u6307\u5b9a\u5230\u54ea\u4e00\u500b\u985e\u5225\u6216\u662f\u8cc7\u6e90\uff0c\u904e\u9019\u8ddf\u4eca\u5929\u8981\u8aaa\u660e\u7684svelte-routing<\/a>\u6709\u751a\u9ebc\u95dc\u4fc2\u5462\uff0c\u7c21\u55ae\u4f86\u8aaa\u5c31\u662fflask rest routing<\/a>\u662f\u4f3a\u670d\u5668\u7aef\u7684\u8def\u7531\uff0csvelte-routing<\/a>\u5247\u662fclient\u7aef\u7684\u8def\u7531\u3002<\/p>\n

routing \u600e\u9ebc\u7528<\/h2>\n

\u7c21\u55ae\u505a\u500b\u7c21\u4ecb\u4e4b\u5f8c\u5c31\u8981\u958b\u59cb\u4ecb\u7d39svelte-routing<\/a>\u600e\u9ebc\u4f7f\u7528\u4e86\u3002\u7576\u7136\u8acb\u5927\u5bb6\u770b\u770b\u4e0b\u9762\u7684\u7bc4\u4f8b\u4e86\u3002\u9019\u500b\u7bc4\u4f8b\u4f86\u81ea\u65bcsvelte-routing<\/a>\u7b46\u8005\u5c31\u76f4\u63a5\u4ecb\u7d39\u4e86\uff0c\u6709\u9700\u8981\u7684\u4eba\u53ef\u4ee5\u76f4\u63a5\u6293\u53d6\u4f7f\u7528\u3002\u53c8\u6216\u8005\u662f\u5148\u5275\u5efa\u4e00\u500b\u5c08\u6848\u518d\u900f\u904enpm\u5b89\u88dd\u5957\u4ef6\u4e5f\u53ef\u4ee5\u3002<\/p>\n

<!-- App.svelte -->\n<script>\n  import { Router, Link, Route } from "svelte-routing";\n  import { Home, About, Blog, BlogPost } from ".\/routes";\n\n  export let url = "";\n<\/script>\n\n<Router url="{url}">\n  <nav>\n    <Link to="\/">Home<\/Link>\n    <Link to="about">About<\/Link>\n    <Link to="blog">Blog<\/Link>\n  <\/nav>\n  <div>\n    <Route path="blog\/:id" component="{BlogPost}" \/>\n    <Route path="blog" component="{Blog}" \/>\n    <Route path="about" component="{About}" \/>\n    <Route path="\/"><Home \/><\/Route>\n  <\/div>\n<\/Router><\/code><\/pre>\n
\u7c21\u55ae\u8aaa\u660e\u4e00\u4e0b\u4e3b\u8981\u5c31\u662fimport\u4ee5\u4e0bRouter<\/code>‘Link<\/code>\u3001Route<\/code>\u4e09\u500b\u5143\u4ef6\u9032\u4f86\uff0c\u5176\u4e2dLink<\/code>\u6703\u8f49\u63db\u6210href\u7684html\u6a19\u7c64\uff0c\u800c\u4e14\u6703\u628ato\u5f8c\u9762\u7684\u53c3\u6578\u5c0d\u61c9\u5230Route<\/code>\u7684\u5143\u4ef6\uff0c\u6700\u5f8cRouter<\/code>\u662f\u653e\u7f6eRoute<\/code>\u7684\u5bb9\u5668\u3002\u6240\u4ee5svelte-routing<\/a>\u4e3b\u8981\u5c31\u662f\u7531\u9019\u4e09\u500b\u5143\u4ef6\u7d44\u6210\uff0c\u76f8\u4fe1\u773c\u5c16\u7684\u8b80\u8005\u5011\u61c9\u8a72\u6703\u60f3\u8aaablog\/:id<\/code>\u9019\u662f\u751a\u9ebc\uff0c\u6c92\u932f\uff0c\u9019\u500b:id<\/code>\u5c31\u662f\u8def\u7531\u7684\u53c3\u6578\uff0c\u63a5\u4e0b\u4f86\u5c31\u53ef\u4ee5\u770b\u4e00\u4e0b\u4e0b\u9762\u9019\u500bBlogPost\u5143\u4ef6\u3002<\/p>\n
<script>\n  export let id;\n<\/script>\n\n<h1>BlogPost<\/h1>\n<p>Id is {id}<\/p><\/code><\/pre>\n
\u9019\u88e1\u8def\u7531\u6703\u628a\u53c3\u6578\u76f4\u63a5\u9935\u5230\u4f60\u7684\u5143\u4ef6\u5167\uff0c\u9019\u662f\u4e0d\u662f\u5f88\u65b9\u4fbf\u5462\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u9019\u7b2c\u4e09\u5341\u5929\u4ecb\u7d39\u4e00\u500bsvelte-routing<\/a>\u7d66\u5927\u5bb6\u8a8d\u8b58\u4e00\u4e0b\uff0c\u900f\u904e\u9019\u5957\u4ef6\u53ef\u4ee5\u8b93\u4f60\u7684svelte\u6709\u4e00\u500b\u7c21\u55ae\u7684html\u8def\u7531\uff0c\u4e4b\u5f8c\u6709\u6a5f\u6703\u518d\u8ddf\u5927\u5bb6\u5206\u4eabsapper<\/a>\u5957\u4ef6\uff0c\u9084\u8acb\u5927\u5bb6\u7e7c\u7e8c\u95dc\u6ce8\u6211\u7684\u90e8\u843d\u683cdevelop-note<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
routing routing \u8def\u7531\u662f\u7b2c\u4e09\u5341\u5929\u8981\u5206\u4eab\u7d66\u5927\u5bb6\u7684 svelte \u6587\u7ae0\uff0c\u4e0d\u904e\u9019\u500b\u5957\u4ef6\u4e0d\u662f\u5b98\u65b9\u7528\u6cd5\uff0c  … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY30-\u8def\u7531\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1439","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1439"}],"version-history":[{"count":16,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1439\/revisions"}],"predecessor-version":[{"id":2984,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1439\/revisions\/2984"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}