Vue前端开发-路由的基本配置

在传统的 Web 页面开发过程中，可以借助超级链接标签实现站内多个页面间的相互跳转，而在现代的工程化、模块化下开发的Web页面只有一个，在一个页面中需要实现站内各功能页面渲染，相互跳转，这时些功能的实现，都需要依赖路由来完成。

基本配置

在 Vue 3中，配置路由之前需要先安装路由，并且安装的版本必须是4.0以上，因此，在vue-cli中，通过下列命令来安装路由模块：

npm install -g vue-router@4.1.6

上述命令中，-g表示全局安装，@可以指定安装模块的版本号。

路由模块安装成功后，接下来就可以配置路由，配置的方法是：先在项目的src文件夹下添加一个名称为router的新文件夹，并在该文件夹中添加一个名称为index的js文件，作为路由模块的配置文件，目录结构如下所下图8-1所示：

与Vue2一样，路由的管理通常都在src/router目录下，如果路由配置不多，则只需要一个index.js文件来管理，如果是Vue2，则在该文件中加入如清单8-1所示代码：

代码清单8-1 index.js代码

import VueRouter from 'vue-router'
const routes = [// ...
]
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes,
})
export default router

在上述代码中，通过 new 的方式实例化一个路由对象，并且在实例化对象时，使用mode选项配置访问路径模式，base选项设置history模式下，路由切换时的基础路径;而在Vue3中，简化了创建路由时的配置项，代码如下清单8-2的所示：

代码清单8-2 index.js代码

import { createRouter, createWebHistory } from 'vue-router'
const routes = [// ...
]
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes 
})
export default router	

在上述代码中，通过createRouter 函数来创建一个新路由对象，在创建对象时，使用 history 来代替 Vue 2 中的mode选项，同时合并了base选项，将base选项的值作为模式函数createWebHistory的参数来传入。

需要说明下，路由的访问模式分为两种，hash和history，前者模式访问路径带#号符，支持所有的浏览器，如“http://abc.com/#/list”，而后者模式访问路径不带#号符，并且只有主流的浏览器支持，同时，还需要后端做相应的配置，如“http://abc.com/list”。

此外，如果项目不是部署在根目录下，而是二级、三级目录中，那么，就必须通过base选项来指定具体的目录，否则，路由在切换时将会报错，base选项默认值是“/”，表示在根目录下部署，该值也可以设置为相对路径，如“./”，这样就可以部署在任意目录下。

**注意：**如果项目比较复杂，路由比较多，则需要在router文件夹中再添加一个routes.js文件，用于管理各模块的路由配置。