我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
如何设计一个高扩展性的路由
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;
进入前开始进度条,进入后结束进度条。
这样一个用户的交互就完成了。
评论(0)