vue自动路由-单页面项目（非build时构建）
更新时间：2019年04月30日 13:55:50 作者：吃西瓜的星星
这篇文章主要介绍了vue自动路由-单页面项目（非build时构建）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
这是一个什么项目？
答：这是一个单页面的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时构建），希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
xss的攻击方式是发生在用户使用浏览器时候运行,通过嵌入脚本窃取用户信息,本文主要介绍了vue如何防范XSS攻击的一些方法,感兴趣的可以了解一下2024-04-04
这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了uniapp+vue3实现上传图片组件封装功能,首先创建一个 components 文件在里面进行组件的创建,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-07-07
Vue3 在＜script setup＞里设置组件name属性的方法
这篇文章主要介绍了Vue3 在＜script setup＞里设置组件name属性的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vue中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了vue2中使用less简易教程，由于不需要手动配置webpack，所以vue中使用less是非常简单的，只需要安装less，less-loadder就ok了2018-03-03
这篇文章主要为大家详细介绍了vue+axios实现post文件下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
这篇文章主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue实现公共组件传值并及时监听到数据更新视图方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue3使用 createApp 自定义通用Dialog的方法
这篇文章主要介绍了Vue3使用 createApp 自定义通用Dialog的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
最新评论