如何设计一个高扩展性的路由

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文件里面。

未知路由页面

一般对于用户输入或者进入未知的路由，也就是我们没有预设的路由，一般会有两种解决方案：

1. 统一进入404页面
2. 自动跳转到首页

具体的做法就是在路由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;

进入前开始进度条，进入后结束进度条。

这样一个用户的交互就完成了。