vue-router动态注册路由，实现无需注册页面可跳转

1. demo工程地址：https://github.com/martSforever/test-router
2. 先说一下特性：
   1. 无需注册页面路由，可直接跳转；
   2. 页面地址可以在数据库中配置；
   3. 页面分包加载，进行页面路由跳转的时候才去加载页面组件代码；
   4. 可配置页面缓存或者不缓存
3. 老样纸，先看效果图
   
4. 原理说明：
   1. 首先是分包加载，当我们根据页面地址进行跳转的时候，首先根据这个页面地址去加载页面import('src/page' + path + '-page.vue').then(module=>console.log(module.default))
      加载文件得到的module.default就是vue组件；其中我们只对src/page目录下的以-page.vue结尾的文件进行分开打包以及按需引入，其他的当做页面公共组件按需引入；
   2. 得到component之后，动态注册路由：

      const route = {name: path, path: path, component: module.default}
      /*添加路由信息*/
      this.$router.options.routes.push(route)
      this.$router.addRoutes([route])
      

   3. 注册完之后就可以跳转了：
      this.$router.push({path, query})
5. 缺点：
   1. 目前这个demo只能配置一级路由，如果需要更多更复杂的配置多级路由等，请自行完善；

核心代码main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)
const router = new VueRouter({routes: []})

Vue.config.productionTip = false

Vue.prototype.$lv = {
    $router: router,
    push(path, query) {
        /*路由跳转*/
        const next = () => this.$router.push({path, query})
        if (this.$router.options.routes.some(route => route.name === path)) {
            next()
        } else {
            /*页面分开打包，按需加载，只打包以page结尾的.vue文件，不以page结尾的表示页面公共的组件，分开打包，按需引入*/
            import('src/page' + path + '-page.vue').then(module => {
                const route = {name: path, path: path, component: module.default}
                /*添加路由信息*/
                this.$router.options.routes.push(route)
                this.$router.addRoutes([route])
                next()
            })
        }
    },
    back() {
        window.history.back()
    }
}

new Vue({
    router,
    render: h => h(App),
    beforeCreate() {
        if (this.$route.path !== '/') {
            this.$lv.push(this.$route.path)
        }
    },
}).$mount('#app')

核心页面App.vue

<template>
    <div id="app">
        <div class="header">
            <!--这里可以理解为从后台数据库中配置的菜单地址，无需注册-->
            <button @click="$lv.go('/student/student',{name:'hello world'})">打开学生页面</button>
            <button @click="$lv.go('/student/student-detail')">打开学生详情页面</button>
            <button @click="$lv.go('/teacher/teacher')">打开老师页面</button>
        </div>
        <div class="page">

            <!--页面不缓存（路由跳转之后会销毁页面vue实例，重新跳转回此路由会重新初始化页面）-->
            <router-view></router-view>

            <!--页面缓存（路由跳转，切换回来的时候页面仍然没有变化）-->
            <!--<keep-alive>
                <router-view></router-view>
            </keep-alive>-->
        </div>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        name: 'app',
        components: {
            HelloWorld
        },
    }
</script>

<style>
    #app {

    }

    .page {
        height: 100px;
        background-color: #f2f2f2;
    }
</style>

工程目录结构:

页面懒加载效果图: