![\"\"](\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\")
<\/div><\/figure>\n\n\n\n
\u63a5\u7740\u4fbf\u53ef\u4ee5\u914d\u7f6eindex.js\u91cc\u9762\u7684\u5185\u5bb9\uff0c\u5185\u5bb9\u5982\u4e0b<\/p>\n\n\n\n
import Vue from \"vue\";\nimport VueRouter from \"vue-router\";\nimport Footer from \"@\/components\/Footer.vue\";\nimport Main from \"@\/components\/Main.vue\";\nimport Header from \"@\/components\/Header.vue\";\n\nVue.use(VueRouter)\n\nconst router =new VueRouter({\n routes:[\n \/\/\u8fd9\u91cc\u914d\u7f6e\u4f60\u81ea\u5df1components\u7ec4\u4ef6\u91cc\u9762\u7684\u6587\u4ef6\uff0c\u6211\u8fd9\u91cc\u5206\u522b\u4e3aHeader\uff0cMain\uff0cFooter\n {path:'\/main',component:Main},\n {path:'\/header',component:Header},\n {path:'footer',component:Footer}\n ]\n})\n\nexport default router<\/code><\/pre>\n\n\n\n\u9996\u5148\u8981\u5f15\u5165Vue\u548cVueRouter<\/p>\n\n\n\n
import Vue from \"vue\";\nimport VueRouter from \"vue-router\";<\/code><\/pre>\n\n\n\n\u7136\u540e\u6dfb\u52a0\u4f60\u6240\u9700\u8981\u7684\u7ec4\u4ef6<\/p>\n\n\n\n
import Footer from \"@\/components\/Footer.vue\";\nimport Main from \"@\/components\/Main.vue\";\nimport Header from \"@\/components\/Header.vue\";<\/code><\/pre>\n\n\n\n\u7136\u540e\u5168\u5c40\u6ce8\u518cVueRouter<\/p>\n\n\n\n
Vue.use(VueRouter)<\/code><\/pre>\n\n\n\n\u63a5\u4e0b\u6765\u521b\u5efa\u5b9e\u4f8b\u5e76\u914d\u7f6e\u8def\u7531\u89c4\u5219<\/p>\n\n\n\n
const router =new VueRouter({\n routes:[\n \/\/\u8fd9\u91cc\u914d\u7f6e\u4f60\u81ea\u5df1components\u7ec4\u4ef6\u91cc\u9762\u7684\u6587\u4ef6\uff0c\u6211\u8fd9\u91cc\u5206\u522b\u4e3aHeader\uff0cMain\uff0cFooter\n {path:'\/main',component:Main},\n {path:'\/header',component:Header},\n {path:'footer',component:Footer}\n ]\n})<\/code><\/pre>\n\n\n\n\u6ce8\u610f\uff1a\u5728vue2\u7684vue-router\u4e2d\uff0c\u5199\u7684\u662froutes\uff0c\u5199\u522b\u7684\u4f1a\u663e\u793a\u4e0d\u51fa\u6765<\/mark><\/p>\n\n\n\n\u5bfc\u51fa\u89c4\u5219<\/p>\n\n\n\n
export default router<\/code><\/pre>\n\n\n\n4.\u914d\u7f6emain.js\u6587\u4ef6<\/h2>\n\n\n\n
\u6253\u5f00main.js\u6587\u4ef6\uff0c\u5f15\u5165router\u5373\u53ef\uff0c\u4ee3\u7801\u5982\u4e0b<\/p>\n\n\n\n
import Vue from 'vue'\nimport App from '.\/App.vue'\nimport router from '.\/router'\/\/1\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n router\/\/2\n}).$mount('#app')<\/code><\/pre>\n\n\n\n\u6700\u540e\uff0c\u518d\u53bbApp.vue\u4e2d\uff0c\u8f93\u5165<\/p>\n\n\n\n
<router-view><\/router-view><\/code><\/pre>\n\n\n\n\u8fdb\u884c\u5360\u4f4d\u5373\u53ef<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
5.\u67e5\u770b\u662f\u5426\u6210\u529f<\/h2>\n\n\n\n
\u4f7f\u7528npm run serve\uff0c\u6253\u5f00\u7f51\u9875\uff0c\u9996\u5148\u5148\u770b\u8def\u5f84\u4e0a\u9762\u6709\u6ca1\u6709#\uff0c\u5982\u56fe\u6240\u793a<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
\u63a5\u7740\u5c31\u53ef\u4ee5\u8f93\u5165\u5f15\u5165\u7684\u5b9e\u4f8b\u4e86<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
\u5982\u679c\u80fd\u6210\u529f\u663e\u793a\u7ec4\u4ef6\u5185\u7684\u4e1c\u897f\uff0c\u5373\u914d\u7f6e\u6210\u529f<\/p>\n\n\n\n
6.\u603b\u7ed3<\/h2>\n\n\n\n
\u672c\u7bc7\u6587\u7ae0\u8bb2\u8ff0\u4e86\u5982\u4f55\u5728vue2\u4e2d\u914d\u7f6evue-router\u4e0e\u5176\u4e00\u4e9b\u7ec6\u8282\u70b9<\/p>\n","protected":false},"excerpt":{"rendered":"
vue-router\u662fvue\u5b98\u65b9\u7684\u4e00\u4e2a\u8def\u7531\uff0c\u5229\u7528\u8fd9\u4e2a\uff0c\u53ef\u4ee5\u66f4\u65b9\u4fbf\u7684\u914d\u7f6e\u7f51\u9875 \u63a5\u4e0b\u6765\u5c06\u9610\u8ff0\u5982\u4f55\u5728vue2\u4e2d\u914d\u7f6ev […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[24],"class_list":["post-194","post","type-post","status-publish","format-standard","hentry","category-qd","tag-qd"],"_links":{"self":[{"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/posts\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":1,"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":202,"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/posts\/194\/revisions\/202"}],"wp:attachment":[{"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chenwenhao.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image-1.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image-6.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image-2-1024x179.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image-3-1024x683.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image-4-1024x683.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"http:\/\/www.chenwenhao.xyz\/wp-content\/uploads\/2026\/04\/image-5-1024x683.png\")
<\/div><\/figure>\n\n\n\n