Vue路由配置的具体过程（附带实例）

在开发 Vue 项目时，如果想要将更多的页面进行整合管理，并且完成更多、更强大的操作功能，那么使用路由功能比使用动态组件加载更为合适。因为像传递参数、守卫处理、滚动行为等操作都是动态组件加载不能实现的。

在使用路由功能之前，我们需要明确，Vue 本身并不包含路由功能。想要使用路由功能，则要通过官方的 Vue 插件 VueRouter 来实现。在正式使用路由功能之前，我们需要做的准备工作就是安装 VueRouter 插件包。

在 vue3-book-router 项目中安装 VueRouter 插件包，只需要在终端运行下方所示命令就可以轻松完成。这里只对 npm 的安装方式进行演示。

npm install vue-router@4 --save

此时已经完成准备工作。接下来回顾一下路由的几个核心概念，即静态路由表、分配地址、统一入口、寻找地址及地址过滤。事实上，路由操作过程也就是对这几个核心概念的展示。

在进行项目的路由操作之前，必须先创建静态路由表，并给路由页面逐个分配地址。我们知道，这个入口只能是唯一的，所以可以先找到当前项目的入口文件，它就是根目录下的 main.js 文件。

此时 main.js 文件代码如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

下面在该入口文件中分 5 步配置路由：
1) 从 vue-router 模块中引入创建路由器与创建 history 路由操作模式的两个函数。

从刚安装的 vue-router 模块中，引入 createRouter 与 createWebHashHistory 两个函数。这两个函数的作用是创建路由器与创建 history 路由操作模式。

2) 引入首页和用户页的路由组件。

引入首页和用户页的路由组件就像动态组件加载一样，同样需要将 Home（首页）和 Users（用户页）两个页面模块进行引入。因为最终展示的就是这两个页面的内容，它们是不可或缺的。

3) 配置静态路由表。

现在可以考虑构建一张静态路由表了。具体地说，是在 main.js 文件中配置 routes 配置项。静态路由表是一个数组，数组中的元素是包含路由路径和路由组件的对象。

这里将 Home（首页）和 Users（用户页）两个页面的分配通过表格展示，如下表所示：

路由路径 (path)	路由组件 (component)	路由目标
/	Home.vue	显示首页内容
/users	Users.vue	显示用户页内容

4) 利用创建路由的函数构建路由器对象。

此时已经有了一张静态路由表，并且分配了路由地址，还确定了 history 路由操作模式为锚点模式，于是就可以确认这个路由对象 router了。利用 createRouter 函数构建路由对象，这个函数的参数是一个对象，而对象的属性就是静态路由表与 history 路由操作模式。

5) 将路由器对象 router 与当前的应用程序关联。

其实现在的路由器对象 router 与整个应用程序并没有任何关联，因此最后一步需要将路由器对象与 Vue 的应用程序关联。

这里还需要明确的是，现在只有一个入口，因此可以利用 use 插入 Vue 插件的方式进行链式操作。在 createApp 中创建 App 以后，直接与 router 进行衔接，路由对象就与当前的应用程序关联上了，可以配合处理页面切换操作。

此时 main.js 文件代码如下：

import { createApp } from 'vue';
import App from './App.vue';
// 1.从vue-router 模块中引入创建路由器与创建history路由操作模式两个函数
import { createRouter, createWebHashHistory } from 'vue-router';
// 2.引入首页和用户页的路由组件
import Home from '@/views/Home';
import Users from '@/views/Users';
// 3.配置静态路由表
const routes = [
  { path: '/', component: Home },
  { path: '/users', component: Users },
];
// 4.利用创建路由的函数构建路由器对象
// 需要明确路由操作模式history，以及确认静态路由表内容
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
// 5.将路由器对象router与当前的应用程序关联
createApp(App).use(router).mount('#app');

现在已经设置了路由器，并且将它与当前应用程序进行了关联。那么问题接踵而来，在哪里进行路由页面的显示呢？如何实现路由页面的切换呢？读者不要着急，下面就开始依次讲解这两个问题的解决方法。

打开根组件文件 App.vue，将原来动态组件加载的 script 脚本部分的内容全部删除，并修改 template 的模板内容。这里可以利用 router-link 进行 button 按钮的替换操作，它的功能主要是实现路由的链接跳转。to 属性指向的是路由跳转的目标，这里需要注意的是，此时两个路由地址的类型都是字符串，需要为其添加双引号或者单引号。如果想要跳转到首页，则指向"/"；如果想要跳转到用户页，则指向"/users"。

button 中的 class 属性可以直接迁移，在 router-link 上会应用该属性，使当前的页面效果与使用动态组件加载操作时的页面效果保持一致。

如果想将首页与用户页直接显示在两个按钮的下方，那么可以在 router-link 的下方写上 router-view 标签组件。router-view 的功能是让路由的渲染目标组件在指定位置渲染、显示。

此时 App.vue 文件代码如下：

<template>
  <div class="container">
    <!-- 利用 router-link 定义路由链接 -->
    <router-link to="/" class="btn btn-secondary">切换到首页</router-link>
    &nbsp;
    <router-link to="/users" class="btn btn-secondary">切换到用户页</router-link>
    <hr>
    <!-- 利用 router-view 定义路由组件在此显示 -->
    <router-view></router-view>
  </div>
</template>

此时运行应用程序可以发现，页面上显示了两个按钮样式的路由链接，并且点击不同的路由链接会对应显示不同的页面内容。

不过需要注意 URL 的链接地址，在链接地址上会发现一个“＃”锚点内容，这是因为在进行 history 路由操作模式配置时，采用的是 createWebHashHistory 锚点模式。页面效果如下图所示。

图 1 页面效果

Vue路由配置的具体过程（附带实例）

相关文章