木灵鱼儿
阅读:933
如何设计一个高扩展性的路由
vue-router本身提供了很多扩展性的东西,这里将一些常用的使用方案分享出来。
默认子路由
基本写法
export default [
{
path: "/admin", component: () => import("@/views/admin"), meta: { title: "管理" },
children: [
{
path: "", name: "Admin", component: () => import("@/views/admin/a"),
meta: { title: "默认路由" }
},
{
path: "b", name: "AdminB", component: () => import("@/views/admin/b"),
meta: { title: "路由b" }
}
]
}
]
可以看到,如果想给admin设置一个默认路由的话,他的默认路由path是空,然后name属性要设置给这个默认路由。
当然我们还有另一种选择,就是重定向
重定向写法
export default [
{
path: "/admin", component: () => import("@/views/admin"), meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import("@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import("@/views/admin/b"),
meta: { title: "路由b" }
}
]
}
]
重定向的写法他的好处就是name的属性不会混淆,子页面就是子页面,默认页我们通过重定向跳转到指定的路由页。
父路由中介
有的时候我们可能需要嵌套路由,为了面包屑导航或者其他需求,然后导致我们的父路由本身并没有什么配置,他可能就是一个简单的路由view
如:
<template>
<router-view/>
</template>
这就导致我们需要创建一个vue文件来承载,如果很多这种情况,就会产生多个这种其实没啥代码量的文件,而且是重复的。
所以我们有几个优化的方式:
使用同一个组件
我们可以做一个通用的vue文件,他的内容就是上面那三行代码,然后我们路由需要使用这种形式的vue文件的时候。
直接import引入这个文件,这样多个地方使用,我们也只是书写了一份vue文件,大大的减少重复带来的消耗。
import ParentRoute from "@/components/router/Parent-route";
export default [
{
path: "/admin", component: ParentRoute , meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import("@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import("@/views/admin/b"),
meta: { title: "路由b" }
}
]
}
]
render 语法
创建一个vue文件来使用是不是有点麻烦,还要创建组件,为此,我们还可以使用render语法。
export default [
{
path: "/admin", component: { render: h => h("router-view") }, meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import("@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import("@/views/admin/b"),
meta: { title: "路由b" }
}
]
}
]
这样也是可以的。
过多的异步路由整合
针对大型的项目,异步路由是一个无法跳过的步骤,但是过度的异步路由,可能会带来很多的单个js文件存在,从而导致过多的占据极小存储的js文件存在。
我们知道异步路由是在用户点开这个路由页面时进行下载的,所以他难免的,在网络不好的时候,会有一段时间空白或者停顿,然后才显示。
所以我们可以将一些连贯的路由进行整合,打包到一个js文件里,这样我再使用这个路由的时候同时下载了下一个将要进入的路由,从而提高用户体验。
这个效果我们要使用webpack的一个注释。
代码如下:
export default [
{
path: "/admin", component: { render: h => h("router-view") }, meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/b"),
meta: { title: "路由b" }
}
]
}
]
在import的圆括号里面,使用/* webpackChunkName: "admin" */
声明一个name,相同name的路由就会打包在一个js文件里面。
未知路由页面
一般对于用户输入或者进入未知的路由,也就是我们没有预设的路由,一般会有两种解决方案:
- 统一进入404页面
- 自动跳转到首页
具体的做法就是在路由router数组的最后面,使用通配符,表示前面路由都没有匹配的,进入到通配符路由,然后我给你做个重定向,或者直接进入404页面
404
export default [
{
path: "/admin", component: { render: h => h("router-view") }, meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/b"),
meta: { title: "路由b" }
}
]
},
{
path: "*", name: "404", component: () => import("@/views/404")
}
]
404页面也不一定要异步路由,推荐是同步,因为404页面一般也不会很大,也就一个提示而已。
重定向到其他页面,如首页admin
export default [
{
path: "/admin", component: { render: h => h("router-view") }, meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/b"),
meta: { title: "路由b" }
}
]
},
{
path: "*", redirect: { name: "Admin" }
}
]
优雅的路由过渡提示
之前说了,异步路由的切换,是有一个等待时间的,这个时间取决于浏览器与服务器之前的速度,速度越快,体验就越好,但是网络不佳的情况,用户点击后是有一个空窗期的,页面可能像卡主一样不动,所以,我们要给用户一个交互提示。
常用的做法就是使用一个顶部进度条。
nprogress插件
安装
yarn add nprogress --dev
安装完毕后我们在路由页面引入
import NProgress from "nprogress";
import "nprogress/nprogress.css";
引入完毕后再路由守卫那使用
import Vue from "vue";
import Router from "router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
Vue.use(Router);
const router = new Router({
mode:"history",
base:"process.env.BASE_URL",
routes:[
{
path: "/admin", component: { render: h => h("router-view") }, meta: { title: "管理" },
children: [
{
path: "", name: "Admin", redirect: { name: "AdminA" }
},
{
path: "a", name: "AdminA", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/a"),
meta: { title: "路由a" }
},
{
path: "b", name: "AdminB", component: () => import(/* webpackChunkName: "admin" */ "@/views/admin/b"),
meta: { title: "路由b" }
}
]
},
{
path: "*", redirect: { name: "Admin" }
}
]
});
//路由进入前
router.beforeEach((to,form,next)=>{
NProgress.start();
next();
});
//路由进入后
router.afterEach(()=>{
NProgress.done();
});
export default router;
进入前开始进度条,进入后结束进度条。
这样一个用户的交互就完成了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue-i18n 的使用方式
vue2与vue3使用的版本以及区别vue2安装:yarn add vue-i18n@8安装8.xx的版本,9.xx是vue3使用的。vue3安装:yarn add vue-i18n区别:vue-i18n@8挂载的时候,是挂载的未实例化的i18对象,vue-i18n@9挂载的是实例化后的i18对象。具体代码后面会有。一些经验i18n的语言文件可以是js,可以是json,ts没测试,然后vue2版他官方例子用的是js,vue3版用的是json,个人测试都可以,所以建议都用json,统一格式。挂载插件的时候,vue2版挂载的是未实例化前的对象,vue3版挂载的是实例化后的对象。多看官方文档,...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

.native修饰符 做了什么
估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...
实现一个点击自动滚动到指定元素,并让input元素聚焦
效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...

分享一个vscode的配置 vue开发用的
安装的插件Atom One Dark Theme 主题Auto Rename Tag 头尾标签自动修改,改一个改一双Beautify 格式化Bracket Pair Colorizer 对象括号选择有颜色表示范围Highlight Matching Tag 选择标签自动高亮对应的结尾标签Material Icon Theme 图标Path Intellisense 路径提示,只能相对路径Version Lens 版本提示,安装完可以在打开package.json文件,在右上角有一个v按钮,点击可以查看最新版本,更新狂魔必备Vetur 用了vue还有不装这个的?Color Hig...