\u6700\u8fd1\u521a\u521a\u7528vue\u5199\u4e86\u4e2a\u516c\u53f8\u9879\u76ee\uff0c\u4f7f\u7528vue-cli\u6784\u5efa\u7684\uff0c\u7b97\u662f\u4e2d\u5927\u578b\u9879\u76ee\u5427\uff0c\u7136\u540e\u8fd9\u91cc\u60f3\u8bb0\u5f55\u5e76\u4e14\u5206\u4eab\u4e00\u4e0b\u5176\u4e2d\u7684\u77e5\u8bc6\u70b9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u5e2e\u52a9,\u540e\u671f\u4f1a\u9010\u6e10\u5206\u4eab\uff1b\u8bdd\u4e0d\u591a\u8bf4\uff0c\u76f4\u63a5\u4e0a\u4ee3\u7801\uff01\uff01<\/p>\n

main.js<\/strong><\/span><\/div>\n
\/\/ The Vue build version to load with the `import` command\r\n\/\/ (runtime-only or standalone) has been set in webpack.base.conf with an alias.\r\nimport Vue from 'vue'\r\nimport App from '.\/App'\r\nimport router from '.\/router'\r\nimport '.\/assets\/css\/common.css'\r\n\r\nVue.config.productionTip = false\r\n\r\n\/* eslint-disable no-new *\/\r\nnew Vue({\r\n el: '#app',\r\n router,\r\n template: '',\r\n components: { App }\r\n})\r\n<\/pre>\n
router\u6587\u4ef6\u5939\u91cc\u9762\u7684index.js<\/strong><\/span><\/div>\n
import Vue from 'vue'\r\nimport Router from 'vue-router'\r\nimport home from '..\/components\/home' \/\/\u8fd9\u91cc\u53ef\u4ee5\u9009\u62e92\u79cd\u5199\u6cd5\uff0c\u4e00\u79cd\u662f\u5199\u5728\u8fd9\u91cc\uff0c\u4e00\u79cd\u662f\u5199\u5728component\u91cc\u9762\uff0c\u770b\u4e0b\u65b9\u4ee3\u7801~\r\n\r\nVue.use(Router)\r\n\r\nexport default new Router({\r\n mode:'history',\r\n routes: [\r\n {\r\n path: '\/',\r\n component: home\r\n },\r\n {\r\n path:'\/pagevue',\r\n component:pagevue => require(['..\/components\/childCom\/pagevue.vue'], pagevue),\r\n },\r\n {\r\n path:'\/nextpagevue',\r\n component:nextpagevue => require(['..\/components\/childCom\/nextpagevue.vue'], nextpagevue),\r\n }\r\n ]\r\n})\r\n<\/pre>\n
home.vue<\/strong><\/span><\/div>\n
<template>\r\n <div class=\"homeMain\">\r\n <div>\u6211\u662f\u9996\u9875<\/div>\r\n <div class=\"routerName\" @click=\"clickMe\">\u70b9\u6211\u8fdb\u4e0b\u4e00\u4e2a\u8def\u7531<\/div>\r\n <\/div>\r\n <\/template>\r\n <script>\r\n export default{\r\n data(){\r\n return{\u00a0 }\r\n },\r\n methods:{\r\n clickMe(){\r\n this.$router.push({path:'\/pagevue'})\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n <\/style><\/pre>\n
pagevue.vue<\/strong><\/span><\/div>\n
\n
\u00a0<template>\r\n <div class=\"homeMain\">\r\n <div>\u6211\u662f\u5b50\u9875\u9762<\/div>\r\n <div class=\"routerName\" @click=\"returnhome\">\u70b9\u6211\u7ee7\u7eed\u8fdb\u4e0b\u4e00\u4e2a\u8def\u7531<\/div>\r\n <\/div>\r\n <\/template>\r\n <script type=\"text\/javascript\">\r\n export default{\r\n methods:{\r\n returnhome(){\r\n this.$router.push({path:'\/nextpagevue'})\r\n }\r\n }\r\n }\r\n <\/script><\/pre>\n<\/div>\n
nextpagevue.vue<\/strong><\/span><\/div>\n
\n
\u00a0<template>\r\n <div class=\"homeMain\">\r\n <div>\u6211\u662f\u53e6\u5916\u4e00\u4e2a\u5b50\u9875\u9762<\/div>\r\n <div class=\"routerName\" @click=\"clickGohome\">\u70b9\u6211\u56de\u5230\u9996\u9875<\/div>\r\n <\/div>\r\n <\/template>\r\n <script type=\"text\/javascript\">\r\n export default{\r\n methods:{\r\n clickGohome(){\r\n this.$router.push({path:'\/'})\r\n }\r\n }\r\n }\r\n <\/script><\/pre>\n<\/div>\n
common.css<\/strong><\/span><\/div>\n
* {\r\n margin: 0;\r\n padding: 0; }\r\n.homeMain {\r\n text-align: center;\r\n margin-top: 100px; }\r\n .homeMain .routerName {\r\n color: #1eb89c;\r\n border: 1px solid #1eb89c;\r\n margin-top: 20px; }\r\n\r\n\/*# sourceMappingURL=common.css.map *\/\r\n<\/pre>\n
\n
\u539f\u6587\u6765\u81ea\uff1ahttps:\/\/www.cnblogs.com\/silent007\/p\/8109822.html<\/a><\/p>\n
\u672c\u6587\u5730\u5740\uff1a http:\/\/lrxjmw.cn\/vue-router.html<\/a>\u7f16\u8f91\uff1a\u738b\u6bc5\uff0c\u5ba1\u6838\u5458\uff1a\u9004\u589e\u5b9d<\/span><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\u6700\u8fd1\u521a\u521a\u7528vue\u5199\u4e86\u4e2a\u516c\u53f8\u9879\u76ee\uff0c\u4f7f\u7528vue-cli\u6784\u5efa\u7684\uff0c\u7b97\u662f\u4e2d\u5927\u578b\u9879\u76ee\u5427\uff0c\u7136\u540e\u8fd9\u91cc\u60f3\u8bb0\u5f55\u5e76\u4e14\u5206\u4eab\u4e00\u4e0b\u5176\u4e2d\u7684\u77e5 […]<\/p>\n","protected":false},"author":564,"featured_media":91055,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-91051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/91051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/564"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=91051"}],"version-history":[{"count":8,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/91051\/revisions"}],"predecessor-version":[{"id":91139,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/91051\/revisions\/91139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/91055"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=91051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=91051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=91051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}