如何在vue中实现自动化路由 - 行业资讯 - 肥雀云

　　介绍

这期内容当中小编将会给大家带来有关如何在vue中实现自动化路由,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

为什么要使用vue

vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

<强>目的

解放双手,从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时,无需多虑,router-auto是你的最优选择,它帮你解决路由的维护成本,你只需要创建相应的文件夹,路由就能动态生成,路由拦截你可以在主。js中去拦截他,总之比你想象的开发还要简单。

router-auto github地址有帮助的可以明星一下

router-auto npm地址欢迎提问题实现效果

<人物>

如何在vue中实现自动化路由

<强>简要用法

具体用法请实时查看github或者npm、下面做一些简要用法介绍

<强>引用

项目结构

包。json等等文件与目录
src项目目录

<李>

页面页面目录

<李>

索引。vue页面入口

<李>测试

<李>

索引。vue页面入口

<李>

索引。vue页面入口

<李>

测试。vue业务组件

<李>

索引。vue页面入口

<李>

你好。vue业务组件

<李>

路由器。js额外配置

<李>

helloworld

<李>

演示<李>回家

上面的目录结构生成的路由结构为

import Vue 得到& # 39;vue # 39; 　　import Router 得到& # 39;vue-router& # 39; 　　import helloworld 得到& # 39;@/页面/helloworld/Index.vue& # 39; 　　import demo 得到& # 39;@/页面/演示/Index.vue& # 39; 　　import demo_test 得到& # 39;@/页面/演示/测试/Index.vue& # 39; 　　import home 得到& # 39;@/页面/home/Index.vue& # 39; 　　, 　　Vue.use(路由器) 　　, 　　export default new 路由器({ 　　模式:才能& # 39;历史# 39; 　　基础:才能& # 39;/汽车/& # 39; 　　路线:[{才能　　,,,路径:& # 39;/helloworld/指数# 39; 　　,,,的名字:& # 39;helloworld # 39; 　　,,组件:helloworld 　　},{才能　　,,,路径:& # 39;/演示/指数# 39; 　　,,,的名字:& # 39;演示# 39; 　　,,组件:演示　　},{才能　　,,,路径:& # 39;/演示/测试/指数# 39; 　　,,,的名字:& # 39;demo_test& # 39; 　　,,组件:demo_test 　　},{才能　　,,,路径:& # 39;/home/指数# 39; 　　,,,的名字:& # 39;回家# 39; 　　,,组件:回家　　})才能　　})

初始化参数配置新RouterAuto(选项={})

参数说明类型默认值必填项contentBase根目录即src平级目录字符串当前根目录process.cwd()否moderouter中modeStringhistory否baserouter中baseString/汽车/否观察者是否启用热更新(请在dev环境启用)Booleanfalse否

<强>小缺陷

<李>

首先我们的项目不需要子路由,所以都是平铺路由,但是你可以文件夹中创建文件夹在用文件夹规划子路由,后续会升级几个版本加入进的去,当然看看使用了和需求,伪需求都砍掉

<李>

现在生成的.router.js文件在磁盘中,作者以后进一步优化放到内存中,一步一个脚印,共创大好河山

<李>

然后就没缺陷了....希望提问题越多越好

上述就是小编为大家分享的如何在vue中实现自动化路由了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。