vue自动路由-单页面项目(非build时构建)


Posted in Javascript onApril 30, 2019

这是一个什么项目?

答:这是一个单页面的vue.js项目,主要为了实现在非build时,进行自动路由。简单点说,就是在请求页面时,根据url进行动态添加路由。

自动路由有什么限制吗?

答:有,因为是通过url进行动态添加,所以,在指定文件夹下,组件文件的相对路径必须与url有一定的关系。当前demo项目,url路径与modules文件夹下的组件相对路径一致。例如:

url地址:localhost:5000/home/index

组件路径:modules/home/index/index.vue

此方式的自动路由能做些什么?

答:

1.动态权限控制:在匹配不上路由时,请求后台获取是否有权限,根据后台的反馈处理是否添加路由(是否允许访问)。

2.自动跳转首页、404页面等页面

项目demo地址

vue.js单项目自动路由:https://github.com/bobowire/wireboy.samples/tree/master/vue.js/onepage

具体步骤

1.组件生成

在router文件夹下添加import.js文件,代码如下图:

 源码:

module.exports = file => () => import('@/modules/' + file + '.vue')

2.拦截路由

 在src目录下,添加autoroute.js文件,代码如下图:

源码:

import router from './router'
const _import = require('./router/import')// 获取组件的方法
router.beforeEach(async (to, from, next) => {
 // 默认的首页页面
 if (to.fullPath === '/') {
 next('/home/index')
 } else if (to.matched.length === 0) {
 // 获取组件路径
 let componentpath = to.fullPath.substring(1) + '/' + to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1)
 // 添加路由
 router.addRoutes([{
 path: to.fullPath,
 name: to.fullPath.substring(to.fullPath.lastIndexOf('/') + 1),
 component: _import(componentpath)
 }])
 // 路由重匹配
 next({ ...to, replace: true })
 } else {
 next()
 }
})

总结

以上所述是小编给大家介绍的vue自动路由-单页面项目(非build时构建),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
js时间查询插件使用详解
Apr 07 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 #Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 #Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 #Javascript
微信小程序常用赋值方法小结
Apr 30 #Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 #Javascript
一百行JS代码实现一个校验工具
Apr 30 #Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
python实现telnet客户端的方法
2015/04/15 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
租房协议书样本
2014/08/20 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS