{"id":2038,"date":"2020-03-03T17:00:41","date_gmt":"2020-03-03T09:00:41","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=2038"},"modified":"2021-10-23T21:11:52","modified_gmt":"2021-10-23T13:11:52","slug":"vue-router","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2020\/03\/03\/vue-router\/","title":{"rendered":"Vue router"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">\u5b89\u88dd<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install vue-router\n\nimport Vue from 'vue'\nimport VueRouter from 'vue-router'\n\nVue.use(VueRouter)\n\ngit clone https:\/\/github.com\/vuejs\/vue-router.git node_modules\/vue-router\ncd node_modules\/vue-router\nnpm install\nnpm run build<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u8d77\u6b65<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Html<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\">&lt;\/script>\n&lt;script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\">&lt;\/script>\n\n&lt;div id=\"app\">\n  &lt;h1>Hello App!&lt;\/h1>\n  &lt;p>  \n    &lt;router-link to=\"\/foo\">Go to Foo&lt;\/router-link>\n    &lt;router-link to=\"\/bar\">Go to Bar&lt;\/router-link>\n  &lt;\/p>\n  &lt;router-view>&lt;\/router-view>\n&lt;\/div><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">JavaScript<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u5167\u5bb9\nconst Foo = { template: '&lt;div>foo&lt;\/div>' }\nconst Bar = { template: '&lt;div>bar&lt;\/div>' }\n\n\/\/ \u5b9a\u7fa9\u8def\u7dda(\u9023\u7d50)\nconst routes = [\n  { path: '\/foo', component: Foo },\n  { path: '\/bar', component: Bar }\n]\n\/\/ \u5b9a\u7fa9\u6846\u67b6 \nconst router = new VueRouter({\n  routes\n})\n\/\/ \u986f\u793a(id)\nconst app = new Vue({\n  router\n}).$mount('#app')<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f48\u5c40<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">View<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"app\">\n  &lt;router-view>&lt;\/router-view>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u5167\u5bb9\nconst User = {\n  template: '&lt;div>User {{ $route.params.id }}&lt;\/div>'\n}\n\/\/ \u5b9a\u7fa9\u8def\u7dda(\u9023\u7d50)\nconst router = new VueRouter({\n  routes: [\n    { path: '\/user\/:id', component: User }\n  ]\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u7bc4\u4f8b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Html<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"https:\/\/unpkg.com\/vue\/dist\/vue.js\">&lt;\/script>\n&lt;script src=\"https:\/\/unpkg.com\/vue-router\/dist\/vue-router.js\">&lt;\/script>\n\n&lt;div id=\"app\">\n&lt;\/div><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">JavaScript<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Vue.use(VueRouter)\n\/\/\u6b21\u9805\u76ee\u5167\u5bb9\nvar Vue_install = {\n\ttemplate: `&lt;div>\u5b89\u88dd&lt;\/div>`\n}\nvar Vue_start = {\n\ttemplate: `&lt;div>\u8d77\u6b65&lt;\/div>`\n}\nvar Vue_view = {\n\ttemplate: `&lt;div>\u4f48\u5c40&lt;\/div>`\n}\nvar Vue_example = {\n\ttemplate: `&lt;div>\u7bc4\u4f8b&lt;\/div>`\n}\nvar Vue_router = {\n\ttemplate: `&lt;div>                \n\t\t&lt;router-link to=\"\/Vue_router\/Vue_install\">\u5b89\u88dd&lt;\/router-link>\n\t\t&lt;router-link to=\"\/Vue_router\/Vue_start\">\u8d77\u6b65&lt;\/router-link>\n\t\t&lt;router-link to=\"\/Vue_router\/Vue_view\">\u4f48\u5c40&lt;\/router-link>\n\t\t&lt;router-link to=\"\/Vue_router\/Vue_example\">\u7bc4\u4f8b&lt;\/router-link>\n\t\t&lt;router-view>&lt;\/router-view>&lt;\/div>`\n}\nvar Home = {\n\ttempalte: `&lt;div>Vue\u9996\u9801&lt;\/div>`\n}\n\/\/\u6b21\u9805\u76ee\u6846\u67b6\nconst router = new VueRouter({\n\troutes: [{\n\t\t\tpath: '\/Vue_router',\n\t\t\tcomponent: Vue_router,\n\t\t\tchildren: [{\n\t\t\t\t\tpath: '\/Vue_router\/Vue_install',\n\t\t\t\t\t\tcomponent: Vue_install\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tpath: '\/Vue_router\/Vue_start',\n\t\t\t\t\t\tcomponent: Vue_start\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tpath: '\/Vue_router\/Vue_view',\n\t\t\t\t\t\tcomponent: Vue_view\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tpath: '\/Vue_router\/Vue_example',\n\t\t\t\t\t\tcomponent: Vue_example\n\t\t\t\t\t},]\n\t\t\t},\n\t\t\t{\n\t\t\t\tpath: '\/home',\n\t\t\t\tcomponent: Home\n\t\t\t}\n\t\t]\n})\n\/\/\u4e3b\u9805\u76ee\u5167\u5bb9\nvar Veu_menu = {\n\ttemplate: `&lt;div>\n\t\t&lt;router-link to=\"\/home\">\u958b\u59cbVeu&lt;\/router-link>\n\t\t&lt;router-link to=\"\/Vue_router\">Veu Router&lt;\/router-link>\n\t\t&lt;router-view>&lt;\/router-view>&lt;\/div>`\n}\n\/\/\u4e3b\u6846\u67b6\nconst app = new Vue({\n\tel: '#app',\n\trouter,\n\tcomponents: {\n\t\tVeu_menu,\n\t},\n\ttemplate: `&lt;Veu_menu \/>`,\n})\n\n<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88dd \u8d77\u6b65 Html JavaScript \u4f48\u5c40 View \u7bc4\u4f8b Html JavaScript<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,40,4],"tags":[],"class_list":["post-2038","post","type-post","status-publish","format-standard","hentry","category-vue","category-web-frame","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=2038"}],"version-history":[{"count":20,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2038\/revisions"}],"predecessor-version":[{"id":2061,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2038\/revisions\/2061"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=2038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=2038"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=2038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}