博客中自动路由的原理?

答:简单点说,就是在请求页面时,根据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. python中while循环和for循环的定义和详细的使用方法

    1. 循环的定义,反复做某事,具有明确的开始和结束.   2. 在Python中循环有while和for两种方式: While循环:1) 语法结构 >>> while 条件: ... ...

  2. Caffe Blob针对图像数据在内存中的组织方式

    Caffe使用Blob结构在CNN网络中存储.传递数据.对于批量2D图像数据,Blob的维度为 图像数量N × 通道数C × 图像高度H × 图像宽度W 显然,在此种场景下,Blob使用4维坐标定位数 ...

  3. Unity3D — — Inspector面板编辑

    转载官方文档,暂未深入研究 PropertyDrawer

  4. Unity编辑器扩展 Chapter7--使用ScriptableObject持久化存储数据

    Unity编辑器扩展 Chapter7--使用ScriptableObject持久化存储数据 unity unity Editor ScirptableObject  Unity编辑器扩展 Chapt ...

  5. NO--13微信小程序,左右联动

    写在前面: 从2016年张小龙发布微信小程序这种新的形态,到2017年小程序的不温不火,再到今年小程序的大爆发,从一度刷爆朋友圈的‘头脑王者’,再到春节聚会坐在一起的火爆小游戏“跳一跳",都 ...

  6. mac指令备忘

    在这里简单记录下最近使用的快捷键,备忘,随时更新. 简单指令记录 mkdir 创建路径 pwd 输出当前路径 ls 查看目录 cd touch 创建文件 tree 输出目录树 mv 源文件 目标文件或 ...

  7. 6. 使用antd pro构建web页面

    前言 在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段.这里假定我们已经了解了react,redux和dva/umi相关的知识.并有做过相关练习. 如果还 ...

  8. Docker--删除容器实例和镜像

    一.删除容器实例 使用命令docker rm 容器ID或者容器名 1.docker ps -a查询已有的实例 [root@cxt data]# docker ps -a 2.docker rm 容器I ...

  9. MyCat安装与测试教程 超详细!

    MyCat安装与测试教程 超详细! MyCat基础知识 一.什么是MYCAT? 1. 一个彻底开源的,面向企业应用开发的大数据库集群 2. 支持事务.ACID.可以替代MySQL的加强版数据库 3. ...

  10. NO.2:自学tensorflow之路------BP神经网络编程

    引言 在上一篇博客中,介绍了各种Python的第三方库的安装,本周将要使用Tensorflow完成第一个神经网络,BP神经网络的编写.由于之前已经介绍过了BP神经网络的内部结构,本文将直接介绍Tens ...