博客中自动路由的原理?

答:简单点说,就是在请求页面时,根据url进行动态添加路由。

与其它自动路由博客的区别?

目前网上的博客,一般都是在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时构建)的更多相关文章

  1. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布

    JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...

  3. 大型vue单页面项目优化总结

    这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理的,保存在这里,方便以后其他项目用到查漏补缺. 1.打包文件中的app.js文件放入cdn,加快页面首次加载速度 2.提取公 ...

  4. vue单页面项目架构方案

    这里的架构方案是基于vue-cli2生成的项目应用程序产生的,是对项目应用程序或者项目模板的一些方便开发和维护的封装.针对单页面的解决方案. 主要有四个方面: 一,不同环境下的分别打包 主要是测试环境 ...

  5. vue如何将单页面改造成多页面应用

    问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...

  6. day 100天 VUE 父子传值,单页面.

     一 .静态资源导入方法 启动服务  npm run serve <template> <div id ="app"> <h3>{{msg}}& ...

  7. vue单页面项目返回上一页无效,链接变化了,但是页面没有变化

    在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...

  8. vue单页面项目中解决安卓4.4版本不兼容的问题

    1.cnpm安装 cnpm i babel-polyfill --save cnpm i es6-promise --save 2.main.js引入 import ‘babel-polyfill‘ ...

  9. vue通过路由实现页面刷新

    vue 开发微信商城项目,需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非 ...

随机推荐

  1. tomcat9在centos7上启动慢问题

    /opt/java/jdk1.8.0_162/jre/lib/security/java.security 将如下配置securerandom.source=file:/dev/random 改为se ...

  2. java事务 深入Java事务的原理与应用

    一.什么是JAVA事务 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID原则.ACID是原子性(atomicity).一致性(consistency).隔离性 (iso ...

  3. Netty源码分析第4章(pipeline)---->第2节: handler的添加

    Netty源码分析第四章: pipeline 第二节: Handler的添加 添加handler, 我们以用户代码为例进行剖析: .childHandler(new ChannelInitialize ...

  4. sqlmap 进阶 (一)

    0x1 命令 以此类推,可以具体自己研究有哪些参数,放在哪,有什么用,怎么用 参考:https://blog.csdn.net/bo_mask/article/details/76130848 0x2 ...

  5. 2017-2018-2 『Java程序设计』课程 结对编程练习_四则运算

    相关测试过程截图(JUnit) JudgeTest:对计算及将整数化为分数的测试 SuffixExpressionTest:中缀转后缀的测试 RationalNumberTest:对RationalN ...

  6. android实战开发02

    正如我之前提到的,我想的是网页来进行测试发布是有较大难度的,但是我高兴的看到我的好友limary已经熬出头了,之后我会关注他的进度的,感谢他给我的鼓励和启发.现在我要讲讲我的天才运算器V2.0版. 在 ...

  7. apm server

    目录 1.apm的tomcat启动失败解决方法 2.apm的mysql修改root密码的方法 内容: 1.apm的tomcat启动失败解决方法 APMServ5.2.6 无法启动Apache的一个问题 ...

  8. Chapter 8 面向对象设计

    设计也是一个建模的活动,在设计阶段将集中研究系统的软件实现问题包括体系结构设计.详细设计.用户界面设计和数据库设计等.通常设计活动分为系统设计和详细设计两个主要阶段.软件设计要遵循模块化.耦合度和内聚 ...

  9. 软件工程实践2018第六次作业——现场UML作图

    团队信息 学号 姓名 博客链接 124 王彬(组长) 点击这里 206 赵畅 点击这里 215 胡展瑞 点击这里 320 李恒达 点击这里 131 佘岳昕 点击这里 431 王源 点击这里 206 陈 ...

  10. springboot maven

    更多信息请从官网获取https://docs.spring.io/spring-boot/docs/2.0.1.RELEASE 1.parent基于自己项目而非spring-boot-starter- ...