动态路由初始化前端

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",

QMPlusVuePage/package.json

 {
-  "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"
+    ]
 }

QMPlusVuePage/src/App.vue

 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    
   }
 }
 </script>

QMPlusVuePage/src/main.js

 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

QMPlusVuePage/src/permission.js

+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

QMPlusVuePage/src/router/index.js

+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

QMPlusVuePage/src/utils/_import.js

+module.exports = file => () => {
+    return import ('@/' + file)
+}
\ No newline at end of file

QMPlusVuePage/src/utils/asyncRouter.js

+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

QMPlusVuePage/src/view/dashbord/index.vue

+<template>
+    <div>
+        Dashbord
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Dashbord"
+    
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/error/index.vue

+<template>
+    <div>
+        404
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Login"
+    
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/layout/index.vue

+<template>
+    <div>
+        模板框
+        <router-view></router-view>
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Layout"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/login/login.vue

+<template>
+    <div>
+        登录
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Login",
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/login/regist.vue

+<template>
+    <div>
+        注册
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Regist"
+    
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/test/index.vue

+<template>
+    <div>
+        动态路由测试
+    </div>
+</template>
+
+<script>
+export default {
+    name:"Test"
+    
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file