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 = falseVue.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>

工程目录结构:

页面懒加载效果图:

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

若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
Vue Router系列之路由懒加载
文章の目录一.具体需要 3 步: 1.安装 `@babel/plugin-syntax-dynamic-import` 包. 2.在 babel.config.js 配置文件中声明该插件. 3.将路 ...
Vue Router系列之路由重定向
文章の目录一.什么是路由重定向二.示例写在最后一.什么是路由重定向路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C,从而展示特定的组件页面:通过路由规则的 redirec ...
Vue项目中使用路由导航守卫处理页面的访问权限
参考Vue-Router官方文档 Vue-Router导航守卫效果展示 1.给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性 { // 小智同学name: 'user-chat',p ...
React router 4 获取路由参数，跨页面参数
1. match通过路径 <Route path="/path/:name" component={example} /> 路由组件内获取参数使用 this.props ...
Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
【Vue】相关生态——Vue Router路由
Vue Router路由基本使用带参数的动态路由匹配捕获所有路由或404 Not found 路由嵌套路由编程式导航重定向和别名将props传递给路由组件不同的历史模式进阶导航守卫 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...

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

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

最新文章

热门文章