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;
进入前开始进度条，进入后结束进度条。
这样一个用户的交互就完成了。
