导航守卫
This commit is contained in:
httpxuchao
parent
f73b15899b
commit
a5974e711c
163
package-lock.json
generated
163
package-lock.json
generated
@ -9,7 +9,9 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11"
|
||||
"element-ui": "^2.15.6",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.5.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.15",
|
||||
@ -3068,6 +3070,14 @@
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/async-validator": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
|
||||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
|
||||
"dependencies": {
|
||||
"babel-runtime": "6.x"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
@ -3140,6 +3150,11 @@
|
||||
"eslint": ">= 4.12.1"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-helper-vue-jsx-merge-props": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
||||
},
|
||||
"node_modules/babel-loader": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.3.tgz",
|
||||
@ -3207,6 +3222,27 @@
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-runtime": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
|
||||
"dependencies": {
|
||||
"core-js": "^2.4.0",
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-runtime/node_modules/core-js": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
|
||||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
|
||||
"deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
|
||||
"hasInstallScript": true
|
||||
},
|
||||
"node_modules/babel-runtime/node_modules/regenerator-runtime": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -5131,7 +5167,6 @@
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
|
||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -5598,6 +5633,22 @@
|
||||
"integrity": "sha512-fiDxw8mO9Ph1Z0bjX2sFTPpi0J0QkOiwOJF+5Q0J0baNc/F9lLePAvDPlnoxvbUYYMizqrKPeotRRkJ9LtxAew==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/element-ui": {
|
||||
"version": "2.15.6",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
|
||||
"integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
|
||||
"dependencies": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.17"
|
||||
}
|
||||
},
|
||||
"node_modules/elliptic": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
|
||||
@ -9273,6 +9324,11 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-wheel": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
|
||||
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
|
||||
},
|
||||
"node_modules/npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
|
||||
@ -11318,6 +11374,11 @@
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz",
|
||||
@ -12953,6 +13014,14 @@
|
||||
"webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/throttle-debounce": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
|
||||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
|
||||
@ -13779,6 +13848,11 @@
|
||||
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
|
||||
"integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
|
||||
},
|
||||
"node_modules/vue-style-loader": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
|
||||
@ -16628,7 +16702,8 @@
|
||||
"version": "4.5.15",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
|
||||
"integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/cli-service": {
|
||||
"version": "4.5.15",
|
||||
@ -16765,7 +16840,8 @@
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
|
||||
"integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@vue/web-component-wrapper": {
|
||||
"version": "1.3.0",
|
||||
@ -16980,7 +17056,8 @@
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
||||
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
@ -17010,13 +17087,15 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
|
||||
"integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"ajv-keywords": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"alphanum-sort": {
|
||||
"version": "1.0.2",
|
||||
@ -17237,6 +17316,14 @@
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"async-validator": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
|
||||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.x"
|
||||
}
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
@ -17290,6 +17377,11 @@
|
||||
"resolve": "^1.12.0"
|
||||
}
|
||||
},
|
||||
"babel-helper-vue-jsx-merge-props": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
||||
},
|
||||
"babel-loader": {
|
||||
"version": "8.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.3.tgz",
|
||||
@ -17341,6 +17433,27 @@
|
||||
"@babel/helper-define-polyfill-provider": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"babel-runtime": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
|
||||
"requires": {
|
||||
"core-js": "^2.4.0",
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.6.12",
|
||||
"resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
|
||||
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -18977,8 +19090,7 @@
|
||||
"deepmerge": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
|
||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
|
||||
},
|
||||
"default-gateway": {
|
||||
"version": "5.0.5",
|
||||
@ -19367,6 +19479,19 @@
|
||||
"integrity": "sha512-fiDxw8mO9Ph1Z0bjX2sFTPpi0J0QkOiwOJF+5Q0J0baNc/F9lLePAvDPlnoxvbUYYMizqrKPeotRRkJ9LtxAew==",
|
||||
"dev": true
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.15.6",
|
||||
"resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
|
||||
"integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
|
||||
@ -22386,6 +22511,11 @@
|
||||
"sort-keys": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"normalize-wheel": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
|
||||
"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
|
||||
@ -24105,6 +24235,11 @@
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.0.tgz",
|
||||
@ -25484,6 +25619,11 @@
|
||||
"neo-async": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"throttle-debounce": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
|
||||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
|
||||
@ -26164,6 +26304,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
|
||||
"integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
|
||||
|
||||
@ -9,7 +9,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11"
|
||||
"element-ui": "^2.15.6",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.5.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.15",
|
||||
|
||||
21
src/App.vue
21
src/App.vue
@ -1,28 +1,11 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
55
src/main.js
55
src/main.js
@ -1,8 +1,63 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import Router from "vue-router"
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path:"/",
|
||||
component: ()=>import("./pages/nav.vue"),
|
||||
// 以上两行 代表着项目的根路径，就代表着默认打开nav 页面
|
||||
|
||||
//children:[{}] 可以用来写nav页面的子页面，里面写上各自的路径地址
|
||||
|
||||
children: [{
|
||||
path:"user",
|
||||
component: ()=>import("./pages/user.vue")
|
||||
},
|
||||
{
|
||||
path:"index",
|
||||
component: ()=>import("./pages/index.vue")
|
||||
},
|
||||
{
|
||||
path:"login",
|
||||
component: ()=>import("./pages/login.vue")
|
||||
}
|
||||
// 上面这种路径的写法是绝对路径 前面对应的是@click="$router.push('/index')和@click="$router.push('/user')
|
||||
// 但是一般都是用相对路径
|
||||
|
||||
]
|
||||
}]
|
||||
|
||||
// vue 的插件
|
||||
Vue.use(ElementUI);
|
||||
|
||||
// vuerouter 插件vue
|
||||
Vue.use(Router)
|
||||
|
||||
const router = new Router({
|
||||
routes // 缩写，相当于routes: routes
|
||||
})
|
||||
|
||||
// 自动被执行 页面跳转的时候
|
||||
router.beforeEach((to, from, next) => {
|
||||
console.log(to); //到哪里去
|
||||
console.log(from); //从哪里来
|
||||
console.log("这是导航守卫");
|
||||
if(to.path != "/nav") {
|
||||
console.log("执行next")
|
||||
next() // 控制页面跳转
|
||||
}else {
|
||||
//alert("抱歉，您没有此权限！")
|
||||
// 跳转页面
|
||||
router.push("/index")
|
||||
}
|
||||
})
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router
|
||||
}).$mount('#app')
|
||||
|
||||
40
src/pages/index.vue
Normal file
40
src/pages/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
这是index <br> <button @click="next">去下一页</button> <br />
|
||||
用户名：<input v-model="user1" type="text" name="user1" /><br />
|
||||
账号：<input v-model="user2" type="text" name="user2" /><br />
|
||||
密码： <input v-model="user3" type="password" name="user3" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PageIndex",
|
||||
data() {
|
||||
return {
|
||||
user1: "",
|
||||
user2: "",
|
||||
user3: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
|
||||
this.$router.push({
|
||||
path: "user",
|
||||
query: {
|
||||
// 传入参数
|
||||
canshu1: this.user1,
|
||||
canshu2: this.user2,
|
||||
canshu3: this.user3,
|
||||
// 自定义传入参数
|
||||
// canshu4: 123
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
15
src/pages/login.vue
Normal file
15
src/pages/login.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
这是login
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"PageLogin"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
82
src/pages/nav.vue
Normal file
82
src/pages/nav.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div id="nav">
|
||||
<div style="width: 200px">
|
||||
|
||||
<el-menu
|
||||
default-active="2"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
style="height: 100vh"
|
||||
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template slot="title">分组一</template>
|
||||
<el-menu-item index="1-1" @click="$router.push('/index')">index</el-menu-item>
|
||||
<el-menu-item index="1-2" @click="$router.push('/user')">user</el-menu-item>
|
||||
<el-menu-item index="1-3" @click="$router.push('/login')">login</el-menu-item>
|
||||
<el-menu-item index="1-4" @click="$router.push('/nav')">nav</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="分组2">
|
||||
<el-menu-item index="1-5">选项5</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-submenu index="1-6">
|
||||
<template slot="title">选项6</template>
|
||||
<el-menu-item index="1-6-1">选项1</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="2" >
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4" >
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PageNav",
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
er() {
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#nav {
|
||||
display: flex;
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
background: gainsboro;
|
||||
}
|
||||
</style>
|
||||
31
src/pages/user.vue
Normal file
31
src/pages/user.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
这是user <br>
|
||||
<button @click="back">返回上一页</button>
|
||||
<button @click="getquery">获取传参</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"PageUser",
|
||||
methods: {
|
||||
back() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
getquery() {
|
||||
// 获取参数
|
||||
console.log("用户名：" + this.$route.query.canshu1);
|
||||
console.log("账号：" + this.$route.query.canshu2);
|
||||
console.log("密码：" + this.$route.query.canshu3);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user