{"id":4727,"date":"2022-03-27T20:17:23","date_gmt":"2022-03-27T12:17:23","guid":{"rendered":"https:\/\/egonlin.com\/?p=4727"},"modified":"2022-04-26T14:21:47","modified_gmt":"2022-04-26T06:21:47","slug":"%e7%ac%ac%e4%b8%83%e8%8a%82%ef%bc%9avue%e5%b8%b8%e7%94%a8%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4727","title":{"rendered":"\u7b2c\u4e03\u8282\uff1aVue\u5e38\u7528\u63d2\u4ef6"},"content":{"rendered":"

\u9879\u76ee\u529f\u80fd\u63d2\u4ef6<\/h1>\n

1\u3001vue-router<\/h2>\n
{\n    path: '\/',\n    name: 'home',\n    \/\/ \u8def\u7531\u7684\u91cd\u5b9a\u5411\n    redirect: '\/home'\n}\n\n{\n    \/\/ \u4e00\u7ea7\u8def\u7531, \u5728\u6839\u7ec4\u4ef6\u4e2d\u88ab\u6e32\u67d3, \u66ff\u6362\u6839\u7ec4\u4ef6\u7684<router-view\/>\u6807\u7b7e\n    path: '\/one-view',\n    name: 'one',\n    component: () => import('.\/views\/OneView.vue')\n}\n\n{\n    \/\/ \u591a\u7ea7\u8def\u7531, \u5728\u6839\u7ec4\u4ef6\u4e2d\u88ab\u6e32\u67d3, \u66ff\u6362\u6839\u7ec4\u4ef6\u7684<router-view\/>\u6807\u7b7e\n    path: '\/one-view\/one-detail',\n    component: () => import('.\/views\/OneDetail.vue'),\n    \/\/ \u5b50\u8def\u7531, \u5728\u6240\u5c5e\u8def\u7531\u6307\u5411\u7684\u7ec4\u4ef6\u4e2d\u88ab\u6e32\u67d3, \u66ff\u6362\u8be5\u7ec4\u4ef6(OneDetail)\u7684<router-view\/>\u6807\u7b7e\n    children: [{\n        path: 'show',\n        component: () => import('.\/components\/OneShow.vue')\n    }]\n}<\/code><\/pre>\n
<!-- router-link\u6e32\u67d3\u4e3aa\u6807\u7b7e -->\n<router-link to="\/">Home<\/router-link> |\n<router-link to="\/about">About<\/router-link> |\n<router-link :to="{name: 'one'}">One<\/router-link> |\n\n<!-- \u4e3a\u8def\u7531\u6e32\u67d3\u7684\u7ec4\u4ef6\u5360\u4f4d -->\n<router-view \/><\/code><\/pre>\n
a.router-link-exact-active {\n    color: #42b983;\n}<\/code><\/pre>\n
\/\/ router\u7684\u903b\u8f91\u8f6c\u8df3\nthis.$router.push('\/one-view')\n\n\/\/ router\u91c7\u7528history\u65b9\u5f0f\u8bbf\u95ee\u4e0a\u4e00\u7ea7\nthis.$router.go(-1)<\/code><\/pre>\n
2\u3001vuex<\/h2>\n
\/\/ \u5728\u4efb\u4f55\u4e00\u4e2a\u7ec4\u4ef6\u4e2d,\u5747\u53ef\u4ee5\u901a\u8fc7this.$store.state.msg\u8bbf\u95eemsg\u7684\u6570\u636e\n\/\/ state\u6c38\u8fdc\u53ea\u80fd\u62e5\u6709\u4e00\u79cd\u72b6\u6001\u503c\nstate: {\n    msg: "\u72b6\u6001\u7ba1\u7406\u5668"\n},\n\/\/ \u8ba9state\u62e5\u6709\u591a\u4e2a\u72b6\u6001\u503c\nmutations: {\n    \/\/ \u5728\u4e00\u4e2a\u4e00\u4e2a\u7ec4\u4ef6\u4e2d,\u5747\u53ef\u4ee5\u901a\u8fc7this.$store.commit('setMsg', new_msg)\u6765\u4fee\u6539state\u4e2d\u7684msg\n    setMsg(state, new_msg) {\n        state.msg = new_msg\n    }\n},\n\/\/ \u8ba9mutations\u62e5\u6709\u591a\u4e2a\u72b6\u6001\u503c\nactions: {\n\n}<\/code><\/pre>\n
3\u3001vue-cookies<\/h2>\n
<\/div>
\u67e5\u770b\u66f4\u591a<\/h2>
\u8054\u7cfb\u7ba1\u7406\u5458\u5fae\u4fe1tutu19192010\uff0c\u6ce8\u518c\u8d26\u53f7<\/p>\n<\/div>
<\/div>
<\/td><\/tr>
<\/td><\/tr><\/tbody><\/table>
<\/td><\/tr><\/tbody><\/table><\/form>