创建路由实例方法createRouter及相关配置剖析
2024-01-03 23:19:06
引言
在前一篇文章中，我们简单了解了Vue3中路由的概念和基本使用。本篇文章，我们将深入剖析创建路由实例的方法createRouter，以及它所拥有的配置项。通过对这些配置项的详细解读，帮助大家更好地理解和使用Vue3的路由功能。
createRouter方法
createRouter方法用于创建一个路由实例，它接收一个参数：routes，该参数是一个数组，用于定义路由规则。路由规则是一个对象，它包含以下属性：
- path：字符串，表示路由的路径。
- component：组件，表示该路由对应的组件。
- name：字符串，表示路由的名称。
例如，以下是一个简单的路由规则：
{
path: '/about',
component: About,
name: 'about'
}
该路由规则表示当用户访问/about路径时，将加载About组件。
配置项
createRouter方法还接收一个第二个参数：options，该参数是一个对象，用于配置路由实例。options对象可以包含以下属性：
- history：对象，表示历史记录管理对象。
- base：字符串，表示路由的基路径。
- mode：字符串，表示路由的模式。
- scrollBehavior：函数，表示路由切换时的滚动行为。
history
history属性用于指定历史记录管理对象。Vue3提供了两种历史记录管理对象：
- hash：基于哈希的管理对象，使用URL的哈希部分来管理路由历史记录。
- history：基于浏览器的历史记录管理对象，使用浏览器的历史记录API来管理路由历史记录。
默认情况下，Vue3使用hash作为历史记录管理对象。如果你想使用history作为历史记录管理对象，可以在options对象中指定：
{
history: createWebHistory()
}
base
base属性用于指定路由的基路径。基路径是指路由的前缀，它必须以/开头。例如，如果你想将路由的基路径设置为/app，可以在options对象中指定：
{
base: '/app'
}
mode
mode属性用于指定路由的模式。Vue3提供了两种路由模式：
- hash：哈希模式，使用URL的哈希部分来管理路由历史记录。
- history：历史模式，使用浏览器的历史记录API来管理路由历史记录。
默认情况下，Vue3使用hash作为路由模式。如果你想使用history作为路由模式，可以在options对象中指定：
{
mode: 'history'
}
scrollBehavior
scrollBehavior属性用于指定路由切换时的滚动行为。该属性是一个函数，它接收两个参数：
- to：目标路由对象。
- from：当前路由对象。
该函数应该返回一个对象，该对象可以包含以下属性：
- x：数字，表示滚动条在水平方向上的位置。
- y：数字，表示滚动条在垂直方向上的位置。
例如，以下是一个简单的scrollBehavior函数：
const scrollBehavior = (to, from) => {
return { x: 0, y: 0 }
}
该函数表示在路由切换时，滚动条将滚动到页面顶部。
结语
本篇文章中，我们详细剖析了Vue3中创建路由实例的方法createRouter，以及它所拥有的配置项。通过对这些配置项的理解，我们可以更好地使用Vue3的路由功能，构建出更强大的前端应用程序。
