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多重继承示例
Mar 13 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
SVG描边动画
2017/02/23 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python opencv 直方图反向投影的方法
2018/02/24 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
python单例模式的多种实现方法
2019/07/26 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python文件读写代码实例
2019/10/21 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python statsmodel的使用
2020/12/21 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
C语言中break与continue的区别
2012/07/12 面试题
学校安全工作制度
2014/01/19 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
5s推行计划书
2014/05/06 职场文书
事业单位考核材料
2014/05/21 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript