Vue-router从配置使用到实战操作再到首屏优化

为什么要使用vue-router

很多初学者在使用vue-cli或者vite的时候都会有一个疑问，为什么我们不能使用a标签来进行页面的跳转，因为我们此刻做的是单页应用，也就是只有一个index.html为入口文件，那使用a标签能跳到哪里去呢，所以我们需要一个单页应用的路径管理器去将我们的组件和路径绑定，当路由发生切换的时候组件也会发生切换。

那么本文将从配置，实战，导航方式，首屏优化以及路由嵌套展开，学习vue-router最基本的使用😏

来教我vue-router吧😍

配置

1. 首先我们需要在我们的项目的根目录下创建router文件夹，在其内创建index.js文件，我们将会在这个文件中配置我们项目中的路由。

   

2. 引入我们的页面，并创建一个配置路由的数组routers，其中每一个路由都需要映射到一个组件，比如/home映射着Home页面组件。

   import Login from '@/page/Login.vue'
   import Home from '@/page/Home.vue'
   const routes = [
       { path: '/', redirect: '/home' },
       { path: '/login', name: 'login', component: Login },
       { path: '/home', name: 'home', component: Home }
   ]
   

3. 从vue-router中引入createRouter与createWebHashHistory方法，前者可以创建路由实例，后者用来创建hash历史模式，下面的代码中，我们创建了路由实例router并传入history与routes两个参数，其中history为哈希历史模式，routes为我们第二步定义的路由数组，最后再通过export default暴露出去

   import { createRouter, createWebHashHistory } from 'vue-router'
   const router = createRouter({
       history: createWebHashHistory(),
       routes
   })
   export default router
   

4. 我们已经将路由实例暴露出去，那么我们就可以在入口文件main.js中引入并注册它

   import router from '@/router'
   const app = createApp(App)
   app.use(router)
   

整体解析：

使用

之后我们就可以根据我们的路由配置来使用声明式导航或者编程式导航进行路由切换啦~

声明式导航

在路由配置好之后我们就可以在整个项目中使用router-link与router-view来自如地切换组件，这种方式为声明式导航。

• router-link：我们可以使用router-link来进行路由的切换，比如我们可以使用<router-link to="/login">来切换到login
• router-view：router-view用来指定当前路由所映射的组件显示的位置，搭配router-link使用

我再通过这副图来描述一下一个典型的场景，我们在上面是导航栏，每个导航都对应着一个router-link而当我们点击一个导航时，会发生路由的切换，那么下面的router-view部分就会随之发生改变。

当然我们在开发后台管理系统的时候经常会搭配使用到element组件库，而其中el-menu是常见的菜单栏，那么我们可以这么来进行路由的切换。

<el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/person">
          <el-icon><setting /></el-icon>
          <span>人员管理</span>
        </el-menu-item>
</el-menu>

这里需要给el-menu添加router这一属性添加后我们可以为el-menu-item的index赋值路径，替换掉了router-link的使用，而router-view依旧正常使用。

编程式导航

我们还可以使用router.push进行路由切换，比如我们在按钮绑定的事件函数内通过此api进行路由切换

PS:当我们在Vue的组件实例中进行编程式导航，可以将router替换为this.$router，比如this.$router。push('/home')，而不少朋友已经开始使用组合式api，因为组合式api中，我们无法访问this，所以我们回使用useRouter，下面的代码为在setup中使用编程式导航

// 1. 引入useRouter
import { useRouter } from "vue-router";
// 2. 使用useRouter拿到路由对象
const router = useRouter();
// 3. 编程式导航
router.push('/home')

那么可能有的朋友会问，我们直接在按钮中使用router-link，这不比绑定个事件再来个函数简单，那么我们需要考虑到路由切换的场景，如果当我们需要进行页面传参的时候就会用到编程式导航，因为我们可以通过其进行参数的传递，比如我们传递一个查询参数来进行内容的查询

router.push({ path: '/user', query: { id: '431430802343479' } })

这里模拟了一个用户查询，它的结果是/user?id=431430802343479，当然这里只使用了query参数，我们还可以使用params与hash来实现动态传参，而结果都各不同

router.push({ path: '/user', params: { uid: '431430802343479' } }) // /user/431430802343479
router.push({ path: '/user', hash: '#name' }) // /user#name
// https://juejin.cn/post/6844903971186802696#heading-0

我们可以根据不同的使用场景来选择合适的传参方式~

除此之外关于编程式导航，如果我们有想要进行回退的需求，那么我们也可以用到编程式导航，这里用到了router.go当然还有其他的api，router.go和我们原生中的window.history.go()类似。

router.go(1) // 向前移动一条记录
router.go(-1) // 向后回退一条记录

这个应用打开怎么这么慢啊！！💢

我们经常会遇到一种情况，在开发或者是在使用其他应用时，第一次启动白屏时间非常长，其实这就需要做一波首屏优化了，从路由角度出发，我们可以使用路由懒加载来解决这个问题。

它是如何进行首屏优化的

提到懒加载，我们肯定会联想到性能优化的方向，比如图片懒加载等等，而在SPA即单页面应用，它被打包后会形成一个js包，在用户首次进入时，如果我们将路由所有的组件都引入进去，那么将会极大地影响首屏的性能，会造成白屏现象。

import Login from '@/page/Login.vue'
import Personnel from '@/page/Personnel.vue'
import Equipment from '@/page/Equipment.vue'

就比如上面是我们在路由配置文件中将我们所需要的组件都引入，再进行路由的配置，那么在首屏中，Login，Personnel，Equipment组件都会被全部加载进去，耗时极大，那么我们就必须用到路由懒加载，达到按需引入，也就是说，当我们切换路由的时候，路由映射的组件才会被加载进来，而不是在首屏的时候去做这件事情，那么我们如何实现路由懒加载呢

如何使用路由懒加载

vue-router官方文档中给出了路由懒加载的使用方法，路由懒加载 | Vue Router (vuejs.org)

我们只需要改变我们组件的引入方式，如下

const Login = () => import('@/page/Login.vue')

也就是将import Login from '@/page/Login.vue'引入，转换成我们声明一个箭头函数，在函数执行的时候执行import语句，引入组件，所以，当我们切换路由的时候才会去触发这个函数，去引入组件，达到按需引入的效果

当然我们也可以直接将这个函数声明在我们的路由数组中

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', name: 'login', component: () => import('@/page/Login.vue') },
]

搞完路由懒加载，还能搞什么呢，有时候在我们的项目中

路由还能套娃？我来套一个🙈

路由还有一个常用的场景，那就是套娃，也就是嵌套路由，比如说在经典的后台管理系统中，我们就需要使用嵌套路由~

<!-- app.vue -->
<template>
  <router-view></router-view>
</template>
​
<!-- Home.vue -->
<Header></Header>
<Main>
  <router-view></router-view>
</Main>

比如拿上面的结构来说，app.vue是我们的入口，在其实我们使用<router-view></router-view>显示Home.vue的内容，Home是做为后台管理的主页面，所以而在Home.vue中，我们还需要在其中添加一个<router-view></router-view>来渲染其他子功能页的内容，所以这里我们就需要用到嵌套路由

const routes = [
    { path: '/', redirect: 'home' },
    { path: '/login', name: Login, component: Login },
    {
        path: '/home',
        name: 'home',
        component: Home,
        redirect: '/home/person',
        children: [
            { path: '/home/person', name: 'person', component: Personnel },
            { path: '/home/equip', name: 'equip', component: Equipment },
        ]
    },
​
]

嵌套路由只需要我们在路由数组中的主页面路由添加子路由数组children即可，而子路由中的路径配置是由父路由路径+子路由路径组成，如'/home/equip'

掌握了上面的知识，就可以在你的基础项目上大展拳脚了，快去配置你的路由吧，下面还会有路由的权限管理以及钩子等着你来探索✌️