From db3fdc2138777c005fb92ea1d93fce822f628e63 Mon Sep 17 00:00:00 2001 From: pixelqm <303176530@qq.com> Date: Sun, 8 Sep 2019 23:22:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1=E5=88=9D?= =?UTF-8?q?=E5=A7=8B=E5=8C=96=E5=89=8D=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- QMPlusVuePage/package-lock.json | 5 ++ QMPlusVuePage/package.json | 87 ++++++++++++----------- QMPlusVuePage/src/App.vue | 6 +- QMPlusVuePage/src/main.js | 7 +- QMPlusVuePage/src/permission.js | 26 +++++++ QMPlusVuePage/src/router/index.js | 47 ++++++++++++ QMPlusVuePage/src/utils/_import.js | 3 + QMPlusVuePage/src/utils/asyncRouter.js | 9 +++ QMPlusVuePage/src/view/dashbord/index.vue | 16 +++++ QMPlusVuePage/src/view/error/index.vue | 16 +++++ QMPlusVuePage/src/view/layout/index.vue | 16 +++++ QMPlusVuePage/src/view/login/login.vue | 15 ++++ QMPlusVuePage/src/view/login/regist.vue | 16 +++++ QMPlusVuePage/src/view/test/index.vue | 16 +++++ 14 files changed, 236 insertions(+), 49 deletions(-) create mode 100644 QMPlusVuePage/src/permission.js create mode 100644 QMPlusVuePage/src/router/index.js create mode 100644 QMPlusVuePage/src/utils/_import.js create mode 100644 QMPlusVuePage/src/utils/asyncRouter.js create mode 100644 QMPlusVuePage/src/view/dashbord/index.vue create mode 100644 QMPlusVuePage/src/view/error/index.vue create mode 100644 QMPlusVuePage/src/view/layout/index.vue create mode 100644 QMPlusVuePage/src/view/login/login.vue create mode 100644 QMPlusVuePage/src/view/login/regist.vue create mode 100644 QMPlusVuePage/src/view/test/index.vue diff --git a/QMPlusVuePage/package-lock.json b/QMPlusVuePage/package-lock.json index 966e8a32..47790431 100644 --- a/QMPlusVuePage/package-lock.json +++ b/QMPlusVuePage/package-lock.json @@ -10913,6 +10913,11 @@ "vue-style-loader": "^4.1.0" } }, + "vue-router": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz", + "integrity": "sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ==" + }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz", diff --git a/QMPlusVuePage/package.json b/QMPlusVuePage/package.json index 8f4f33d2..560c863d 100644 --- a/QMPlusVuePage/package.json +++ b/QMPlusVuePage/package.json @@ -1,46 +1,47 @@ { - "name": "qm-plus-vue-page", - "version": "0.1.0", - "private": true, - "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "lint": "vue-cli-service lint" - }, - "dependencies": { - "core-js": "^2.6.5", - "vue": "^2.6.10" - }, - "devDependencies": { - "@vue/cli-plugin-babel": "^3.11.0", - "@vue/cli-plugin-eslint": "^3.11.0", - "@vue/cli-service": "^3.11.0", - "babel-eslint": "^10.0.1", - "eslint": "^5.16.0", - "eslint-plugin-vue": "^5.0.0", - "vue-template-compiler": "^2.6.10" - }, - "eslintConfig": { - "root": true, - "env": { - "node": true + "name": "qm-plus-vue-page", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" }, - "extends": [ - "plugin:vue/essential", - "eslint:recommended" - ], - "rules": {}, - "parserOptions": { - "parser": "babel-eslint" - } - }, - "postcss": { - "plugins": { - "autoprefixer": {} - } - }, - "browserslist": [ - "> 1%", - "last 2 versions" - ] + "dependencies": { + "core-js": "^2.6.5", + "vue": "^2.6.10", + "vue-router": "^3.1.3" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^3.11.0", + "@vue/cli-plugin-eslint": "^3.11.0", + "@vue/cli-service": "^3.11.0", + "babel-eslint": "^10.0.1", + "eslint": "^5.16.0", + "eslint-plugin-vue": "^5.0.0", + "vue-template-compiler": "^2.6.10" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/essential", + "eslint:recommended" + ], + "rules": {}, + "parserOptions": { + "parser": "babel-eslint" + } + }, + "postcss": { + "plugins": { + "autoprefixer": {} + } + }, + "browserslist": [ + "> 1%", + "last 2 versions" + ] } diff --git a/QMPlusVuePage/src/App.vue b/QMPlusVuePage/src/App.vue index fcc56627..96cdbcfb 100644 --- a/QMPlusVuePage/src/App.vue +++ b/QMPlusVuePage/src/App.vue @@ -1,17 +1,15 @@ diff --git a/QMPlusVuePage/src/main.js b/QMPlusVuePage/src/main.js index 63eb05f7..25161480 100644 --- a/QMPlusVuePage/src/main.js +++ b/QMPlusVuePage/src/main.js @@ -1,8 +1,11 @@ import Vue from 'vue' import App from './App.vue' +import router from '@/router/index' + Vue.config.productionTip = false new Vue({ - render: h => h(App), -}).$mount('#app') + render: h => h(App), + router +}).$mount('#app') \ No newline at end of file diff --git a/QMPlusVuePage/src/permission.js b/QMPlusVuePage/src/permission.js new file mode 100644 index 00000000..2e4a9cff --- /dev/null +++ b/QMPlusVuePage/src/permission.js @@ -0,0 +1,26 @@ +import router from './router' +import { asyncRouterHandle } from '@/utils/asyncRouter'; + +router.beforeEach((to, from, next) => { + next() + // asyncRouterHandle(asyncRouter) // 等待动态使用 VUEX持久化 会将其放入 vuex并且动态生成左侧列表 + // router.addRoutes(asyncRouter) +}) + +const asyncRouter = [{ + path: '/layout', + name: 'layout', + component: 'view/layout/index.vue', + meta: { + title: '首页', + }, + children: [{ + path: 'dashbord', + name: 'dashbord', + component: 'view/dashbord/index.vue' + }, { + path: "test", + name: "test", + component: "view/test/index.vue" + }] +}] \ No newline at end of file diff --git a/QMPlusVuePage/src/router/index.js b/QMPlusVuePage/src/router/index.js new file mode 100644 index 00000000..91fe539e --- /dev/null +++ b/QMPlusVuePage/src/router/index.js @@ -0,0 +1,47 @@ +import Vue from 'vue' +import Router from 'vue-router' + +Vue.use(Router) + +const baseRouters = [{ + path: '/', + redirect: '/login' + }, + { + path: '/login', + name: 'login', + component: () => + import ('@/view/login/login.vue') + }, + { + path: '/regist', + name: 'regist', + component: () => + import ('@/view/login/regist.vue') + }, + { + path: "/error", + name: "error", + component: () => + import ('@/view/error/index.vue') + }, + { + path: '*', + redirect: '/error' + + } +] + +// 需要通过后台数据来生成的组件 + +const createRouter = () => new Router({ + routes: baseRouters +}) + +const router = createRouter() + +export function resetRouter() { + const newRouter = createRouter() + router.matcher = newRouter.matcher +} +export default router \ No newline at end of file diff --git a/QMPlusVuePage/src/utils/_import.js b/QMPlusVuePage/src/utils/_import.js new file mode 100644 index 00000000..43755d17 --- /dev/null +++ b/QMPlusVuePage/src/utils/_import.js @@ -0,0 +1,3 @@ +module.exports = file => () => { + return import ('@/' + file) +} \ No newline at end of file diff --git a/QMPlusVuePage/src/utils/asyncRouter.js b/QMPlusVuePage/src/utils/asyncRouter.js new file mode 100644 index 00000000..fbefeb05 --- /dev/null +++ b/QMPlusVuePage/src/utils/asyncRouter.js @@ -0,0 +1,9 @@ +const _import = require('./_import') //获取组件的方法 +export const asyncRouterHandle = (asyncRouter) => { + asyncRouter.map(item => { + item.component = _import(item.component) + if (item.children) { + asyncRouterHandle(item.children) + } + }) +} \ No newline at end of file diff --git a/QMPlusVuePage/src/view/dashbord/index.vue b/QMPlusVuePage/src/view/dashbord/index.vue new file mode 100644 index 00000000..4a94bda4 --- /dev/null +++ b/QMPlusVuePage/src/view/dashbord/index.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/QMPlusVuePage/src/view/error/index.vue b/QMPlusVuePage/src/view/error/index.vue new file mode 100644 index 00000000..f2eff74b --- /dev/null +++ b/QMPlusVuePage/src/view/error/index.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/QMPlusVuePage/src/view/layout/index.vue b/QMPlusVuePage/src/view/layout/index.vue new file mode 100644 index 00000000..cd4f27b3 --- /dev/null +++ b/QMPlusVuePage/src/view/layout/index.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/QMPlusVuePage/src/view/login/login.vue b/QMPlusVuePage/src/view/login/login.vue new file mode 100644 index 00000000..3b99f318 --- /dev/null +++ b/QMPlusVuePage/src/view/login/login.vue @@ -0,0 +1,15 @@ + + + + + \ No newline at end of file diff --git a/QMPlusVuePage/src/view/login/regist.vue b/QMPlusVuePage/src/view/login/regist.vue new file mode 100644 index 00000000..7945e4ed --- /dev/null +++ b/QMPlusVuePage/src/view/login/regist.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file diff --git a/QMPlusVuePage/src/view/test/index.vue b/QMPlusVuePage/src/view/test/index.vue new file mode 100644 index 00000000..a856d157 --- /dev/null +++ b/QMPlusVuePage/src/view/test/index.vue @@ -0,0 +1,16 @@ + + + + + \ No newline at end of file