- demo工程地址:https://github.com/martSforever/test-router
- 先说一下特性:
- 无需注册页面路由,可直接跳转;
- 页面地址可以在数据库中配置;
- 页面分包加载,进行页面路由跳转的时候才去加载页面组件代码;
- 可配置页面缓存或者不缓存
- 老样纸,先看效果图
- 原理说明:
- 首先是分包加载,当我们根据页面地址进行跳转的时候,首先根据这个页面地址去加载页面
import('src/page' + path + '-page.vue').then(module=>console.log(module.default))
加载文件得到的module.default就是vue组件;其中我们只对src/page目录下的以-page.vue结尾的文件进行分开打包以及按需引入,其他的当做页面公共组件按需引入; - 得到component之后,动态注册路由:
const route = {name: path, path: path, component: module.default} /*添加路由信息*/ this.$router.options.routes.push(route) this.$router.addRoutes([route])
- 注册完之后就可以跳转了:
this.$router.push({path, query})
- 首先是分包加载,当我们根据页面地址进行跳转的时候,首先根据这个页面地址去加载页面
- 缺点:
- 目前这个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>
工程目录结构:
页面懒加载效果图: