木灵鱼儿

木灵鱼儿

阅读:582

最后更新:2020/12/02/ 22:09:38

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

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;

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

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 582

相关文章