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

demo工程地址：https://github.com/martSforever/test-router
先说一下特性：
1. 无需注册页面路由，可直接跳转；
2. 页面地址可以在数据库中配置；
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})
缺点：
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,
    go(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),
}).$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>

工程目录结构:

在这里插入图片描述

页面懒加载效果图:
在这里插入图片描述

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

猜你喜欢