{"id":9397,"date":"2023-11-24T17:43:19","date_gmt":"2023-11-24T09:43:19","guid":{"rendered":"https:\/\/sdeno.com\/?p=9397"},"modified":"2023-11-24T17:46:59","modified_gmt":"2023-11-24T09:46:59","slug":"vue-router%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=9397","title":{"rendered":"vue-router\u7b14\u8bb0"},"content":{"rendered":"

\u4f7f\u7528vue2<\/p>\n

https:\/\/www.jianshu.com\/p\/4c5c99abb864<\/p>\n

vue-router\u662f\u53ef\u4ee5\u5b9e\u73b0\u5f53\u9875\u5e94\u7528\u7684\u5de5\u5177<\/p>\n

 <\/p>\n

\u8def\u7531\u53c2\u6570\u603b\u89c8<\/p>\n

new VueRouter({\r\n       routes:[\r\n            {\r\n               path: '\/', \r\n               name: 'Hello',\r\n               component:{\r\n                    template: '<div>User<\/div>'\r\n               },\r\n               children: [\r\n                    {\r\n                      path: 'profile',\r\n                      component: UserProfile\r\n                    },\r\n                    {\r\n                      path: 'posts',\r\n                      component: UserPosts\r\n                    }\r\n               ],\r\n               redirect:\"\"\r\n            }\r\n       ]\r\n  })<\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\u73af\u5883\u642d\u5efa\uff1a<\/span><\/p>\n
npm init --yes  \/\/\u521b\u5efa\u9ed8\u8ba4package.json<\/pre>\n
 <\/p>\n
\u5b89\u88c5<\/span><\/p>\n
npm i vue@2.6.11 vue-router@3.3.4 -S\r\nnpm i @vue\/cli-service@4.4.6 vue-template-compiler@2.6.11 -D\r\nnpm i html-webpack-plugin@3.2.0 -D<\/pre>\n
@vue\/cli-service \/\/\u6a21\u5757\u57fa\u4e8ewebpack\u7684 webpack-dev-server\u53c8\u5728\u8fdb\u884c\u4e8c\u6b21\u5f00\u53d1\u5c01\u88c5
\nvue-template-compiler \/\/\u8bfb\u53d6\u8bc6\u522bvue\u683c\u5f0f\u7684\u6587\u4ef6
\nhtml-webpack-plugin \/\/\u6307\u5b9a\u9ed8\u8ba4\u6a21\u677f \/public\/index.html<\/p>\n
 <\/p>\n
\u6307\u5b9ahtml\u6a21\u677f<\/span><\/p>\n
https:\/\/cli.vuejs.org\/zh\/guide\/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9<\/a><\/p>\n
\u5b89\u88c5\u597dhtml-webpack-plugin\uff0c\u5728\u8ddf\u76ee\u5f55\u4e0b\u521b\u5efapublic\/index.html\uff0c\u5c31\u9ed8\u8ba4\u4f7f\u7528\u4e86<\/p>\n
\/\/index.html<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\r\n    <meta name=\"renderer\" content=\"webkit\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\r\n    <link rel=\"icon\" href=\"<%= BASE_URL %>favicon.ico\">\r\n    <title><%= webpackConfig.name %><\/title>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"app\"><\/div>\r\n    <!-- built files will be auto injected -->\r\n  <\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
@vue\/cli-service<\/span><\/p>\n
vue\u9879\u76ee\uff0c\u6253\u5305\uff0c\u5f00\u53d1\u90fd\u662f\u901a\u8fc7\u547d\u4ee4\u542f\u52a8<\/p>\n
https:\/\/cli.vuejs.org\/zh\/guide\/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4<\/a><\/p>\n
\u7f16\u8f91package.json\uff0c\u6dfb\u52a0\u5feb\u6377\u952e\uff1a<\/p>\n
{\r\n  \"scripts\": {\r\n    \"serve\": \"vue-cli-service serve\",\r\n    \"build\": \"vue-cli-service build\"\r\n  }\r\n}<\/pre>\n
\u6700\u57fa\u672c\u4e24\u4e2a\u547d\u4ee4\u662f
\n1\uff0c\u6253\u5305 npm run build
\n2\uff0c\u5f00\u53d1 npm run serve
\n\u6267\u884c\u4ee5\u4e0a\u4e24\u4e2a\u547d\u4ee4\u9ed8\u8ba4\u90fd\u4f1a\u6267\u884c.\/src\/main.js \uff0c\u8bf4\u660emain.js\u5c31\u662f\u6574\u4e2a\u9879\u76ee\u7684\u5165\u53e3\u6587\u4ef6\u4e86<\/p>\n
 <\/p>\n
\u5165\u53e3\u3001\u6a21\u677f\u521b\u5efa<\/span><\/div>\n
\u65b0\u5efa\u76ee\u5f55src
\n\u521b\u5efa\uff1a\/src\/main.js \/\/\u8fd9\u4e2a\u5c31\u662f\u6240\u6709\u6587\u4ef6\u7684\u5165\u53e3<\/p>\n
import Vue from 'vue'\r\nimport VueRouter from 'vue-router'\r\nimport App from '.\/app.vue' \/\/vue\u6bcd\u7248\u9875\r\nimport Index from '.\/index.vue'  \/\/\u9996\u9875html\u3001js\r\nVue.use(VueRouter)\r\n\r\n\r\nvar CreateVue = new Vue({\r\n  el:'#app',\r\n  router:new VueRouter({\r\n       routes:[\r\n           { path: '\/', component: Index }\r\n       ]\r\n  }),\r\n  render(createElement){\r\n        return createElement(App);\r\n   },\r\n})<\/pre>\n
 <\/p>\n
\u521b\u5efa\uff1a\/src\/app.vue \/\/\u89c6\u56fe\u5165\u53e3\u6a21\u677f<\/p>\n
<template>\r\n    <div id=\"app\">\r\n        <router-view\/>  \/\/\u6240\u6709\u7684html\u90fd\u5f15\u5165\u5230\u8fd9\u91cc\r\n    <\/div>\r\n<\/template>\r\n\r\n<script>\r\n    export default {\r\n        name: \"app\"\r\n    }\r\n<\/script>\r\n\r\n<style scoped>\r\n<\/style><\/pre>\n
 <\/p>\n
\/\/\u521b\u5efa\u4e00\u4e2a\u9996\u9875\u6a21\u677f<\/div>\n
\/src\/index.vue \/\/\u4ee5\u540e\u7684\u6a21\u677f\u9875\u90fd\u7c7b\u4f3c\u8fd9\u6837\u521b\u5efa\uff0cindex.vue\u7684\u5185\u5bb9\u4f1a\u88ab\u5f15\u5165\u5230app.vue\u4e2d<\/div>\n
<template>\r\n    <div>\r\n        \u9996\u9875\r\n    <\/div>\r\n<\/template>\r\n\r\n<script>\r\n    export default {\r\n        name: \"index\"\r\n    }\r\n<\/script>\r\n\r\n<style scoped>\r\n<\/style><\/pre>\n
 <\/p>\n
 <\/p>\n
vue-router\u6a21\u5f0f<\/span>
\n\u6709\u4e24\u79cd\u6a21\u5f0f\uff1ahash(\u9ed8\u8ba4)\uff0chistory<\/p>\n
(1)hash
\nhash \u539f\u7406 \u4f9d\u9760\u76d1\u542conhashchange\u4e8b\u4ef6\uff0c\u83b7\u53d6\u5230#\u540e\u9762\u7684\u53c2\u6570\uff0c\u59cb\u7ec8\u90fd\u4ee5index.html\u4f5c\u4e3a\u6a21\u677f\u9875\uff0c\u5b9e\u73b0\u7ec4\u4ef6\u5207\u6362\u89c6\u56fe\uff0c\u9875\u9762\u4e0d\u4f1a\u53bb\u5237\u65b0\u518d\u6b21\u8bf7\u6c42\u8d44\u6e90<\/p>\n
(2)history
\nhistory \u6a21\u5f0f\u7684\u539f\u7406
\nH5\u65b0\u63a8\u51fa\u7684\u4e24\u4e2a\u795e\u5668\uff1apushState\u4e0ereplaceState
\n\u4f5c\u7528\u5c31\u662f\u5c06url\u66ff\u6362\u4e14\u4e0d\u5237\u65b0\uff0c\u597d\u6bd4\u6302\u7f8a\u5934\u5356\u72d7\u8089\uff0chttp\u5e76\u6ca1\u6709\u53bb\u8bf7\u6c42\u670d\u52a1\u5668\u8be5\u8def\u5f84\u4e0b\u7684\u8d44\u6e90\uff0c\u7f3a\u70b9\u5c31\u662f\uff0c\u4e00\u65e6\u5237\u65b0\u5c31\u4f1a\u66b4\u9732\u8fd9\u4e2a\u5b9e\u9645\u4e0d\u5b58\u5728\u7684\u201c\u7f8a\u5934\u201d\uff0c\u663e\u793a404\uff0c\u4ee5\u4e0b\u662f\u89e3\u51b3\u627e\u4e0d\u5230\u9875\u9762\u7684\u529e\u6cd5\u3002<\/p>\n
1\uff0c\u9700\u8981\u540e\u53f0\u652f\u6301history\u6a21\u5f0f\uff0c\u5c31\u9700\u8981\u914d\u7f6enginx\u3001apache\u6216\u8005IIS\uff0c\u8fd9\u91cc\u4ee5nginx\u4e3a\u6848\u4f8b
\n\u4f8b\u5982\u9879\u76ee\u5730\u5740\u662f\uff1ahttp:\/\/localhost:8080\/dist\/#\/<\/p>\n
module.exports={\r\n    publicPath: '\/dist',\r\n}<\/pre>\n
 <\/p>\n
new Router({\r\n        mode:'history',\r\n        base: '\/dist'\r\n})<\/pre>\n
 <\/p>\n
location \/ {\r\n \r\n    try_files       $uri $uri\/ \/dist\/index.html; #\u610f\u601d\u662f\u627e\u4e0d\u5230\u6587\u4ef6\u6216\u8005\u76ee\u5f55\u627e\u5230\u8be5\u6587\u4ef6\r\n}<\/pre>\n
vue-router\u8def\u7531hash\u548chistory\u539f\u7406\u53cahistory\u9700\u540e\u53f0\u914d\u7f6e<\/a><\/p><\/blockquote>\n