createRouter

创建路由实例

创建一个可以被 Vue 应用程序使用的路由实例，使用如下：

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router

在开发中，我们一般这么配置就可以了，变量routes是用来存储路由的，但是值得我们注意的是：这是Vue Router 4.x的用法，它与低版本的使用是不一样的，在使用的时候一定要注意Router的版本号。

配置项

createRouter函数里面不止上述代码的两个配置参数，让我们一起来看看吧。

history

官方说，用于路由实现历史记录。大多数 web 应用程序都应该使用 createWebHistory，但它要求正确配置服务器*。你还可以使用 createWebHashHistory 的基于 hash 的历史记录，它不需要在服务器上进行任何配置，但是搜索引擎根本不会处理它，在SEO上表现很差。

其实就是让我们把路由配置为hash模式或者HTML5模式，它跟低版本的作用是一样的，只不过使用方法发生了变化，使用如下：

HTML5模式

history: createWebHistory()

这是单页面应用程序中最常见的历史记录，应用程序必须通过 http 协议被提供服务。而createWebHistory函数是有一个参数的，可以添加一个路径，如下：

history: createWebHistory('/folder/')

那么我们对应的输出网址为： https://xxx.com/folder/。

hash模式

history: createWebHashHistory()

类比HTML5模式，此函数也是有一个相同功能的参数，只不过输出地址发生了一些变化： https://xxx.com/folder/#。

从这个结果中我们可以看出，多了一个#，所以我们在传参的时候要避免使用含有#的路径，例如：

createWebHashHistory('/folder/#/app/') //不建议使用这样的参数

注意：如果 SEO 对你很重要，你应该使用createWebHistory。

linkActiveClass 和 linkExactActiveClass

linkActiveClass 用于激活的 RouterLink 的默认类，linkExactActiveClass 用于精准激活的 RouterLink 的默认类。上篇回首Vue3之路由篇（一）中讲到的是在router-link上的配置，这与在createRouter函数里面的配置是一样的。

parseQuery 和 stringifyQuery

parseQuery 用于解析查询的自定义实现，必须解码查询键和值。

stringifyQuery 对查询对象进行字符串化的自定义实现，不应该在前面加上 ?，应该正确编码查询键和值。

假如我们用 qs 包来解析查询，我们可以同时提供 parseQuery 和 stringifyQuery，如下：

parseQuery: qs.parse,
stringifyQuery: qs.stringify,

routes

对应它，大多数人应该都是熟悉的，它是应该添加到路由的初始路由列表。后面我们还会详细介绍。

scrollBehavior

在页面之间导航时控制滚动的函数。可以返回一个 Promise 来延迟滚动。有关更多详细信息，请参见滚动行为。

function scrollBehavior(to, from, savedPosition) {
  // `to` 和 `from` 都是路由地址
  // `savedPosition` 可以为空，如果没有的话。
}

每次路由跳转的时候，我们可以控制滚动行为。

总结

在实际开发中，我们一般掌握history和routes就可以了。
如果不想服务器有那么多配置的话，我们会用createWebHashHistory ；如果 SEO 对你很重要，我们应该使用createWebHistory，但这也需要我们对服务器进行配置。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之路由篇（二）