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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
JS控制GIF图片的停止与显示
Oct 24 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
php桌面中心(三) 修改数据库
2007/03/11 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
应聘自荐书
2013/10/08 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
煤矿安全保证书
2015/02/27 职场文书
员工辞退通知书
2015/04/17 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸