createRouter
创建一个可以被Vue应用程序使用的路由实例
export declare function createRouter(options: RouterOptions): Router
e.g:
createRouter({
history: createWebHistory(),
linkActiveClass: "/index",
scrollBehavior: (to, from, savedPosition) => {},
routes,
})
RouterOption 参数列表
字段 | 描述 | 可选值 | |
---|---|---|---|
linkActiveClass | 用于激活的RouterLink的默认类 | 默认值: router-link-active | |
linkExactActiveClass | 用于精确激活的RouterLink的默认类 | 默认值: router-link-exact-active | |
parseQuery | 用于解析查询的自定义实现.必须解码查询键和值 | (value : string) => Record<> / qs | |
history | 用于路由实现历史记录 | createWebHistory() / createWebHashHistory() | |
routes | 应该添加到路由的初始路由列表 | RouteRecordRaw[] | |
scrollBehavior | 在页面之间导航时控制滚动的函数,可以反悔一个promise来延迟滚动 | 滚动行为: RouterScrollBehavior | |
stringifyQuery | 对查询对象进行字符串化的自定义实现,需正确编码查询键和值 | ( query: Record<string | number> ...) => string |
RouteRecordRaw[]
当用户通过routes
option 或者router.addRoutes()
来添加路由,可以得到路由记录
- 单一视图记录: 有一个
component
配置 (当前页面内只有一个router-view
,不需要多个同级窗口) - 多视图记录(命名路由): 有一个
components
(有复数s呦~)配置 (当前页面需要多个router-view
通过不同名称区分,e .g:导航区域、头部区域、主体内容区) - 重定向记录:没有
component
相关配置,因为重定向记录永远不会到达(一般我们多用来将 ``地址重定向到初始组件地址)
字段 | 描述 | 类型 | 可选值 | |||
---|---|---|---|---|---|---|
path | 记录的路径,应该以``开头,除非是其他记录的子记录 | string | `/login | /users/create` | ||
redirect | 重定向到具体的路径,发生在所有导航守卫之前,并以新的目标位置触发新的导航(p s.实线变道肯定是要在监控发现之前啊~) | stirng | RouteLocationRaw | 对应routerRaw的path | ||
children | 当前记录的嵌套路由 | RouteRecordRaw数组 | ||||
alias | 路由的别名,允许定义类似记录副本的额外路由所有的alias 和path 值必须共享相同的参数 | string | string[] (可选) | |||
name | 路由记录的名称, 唯一性 | string | symbol (可选) | |||
beforeEnter | 在进入特定于此记录的守卫之前的行为 | |||||
props | 允许将参数作为props传递给由router-view渲染的组件,当传递给一个多视图记录时,它应该是一个与组件相同键的对象,或者是应用于每个组件的布尔值bo | Boolean | Record<string, any> | [true | object | function](next.router.vuejs.org/zh/guide/es…) |
meta | 在记录上附加自定义数据 | RouteMeta (可选) | RouteMeta | |||
components | 命名视图的字典,如果没有,包含一个键为default 的对象 | Record<string, component |
参数值详解
createWebHistory()
依赖HTML5 History API 和服务器配置,当你使用history模式时,URL像正常的url,这种模式需要后台配置支持,因为Vue应用时单页客户端应用,如果后台没有正确的配置,当浏览器直接访问http://test.com/index
,就会返回404,需要在服务端增加一个覆盖所有情况的候选资源,当URL不匹配时用来返回到同一个index.html
页面
createWebHashHistory()
使用URL hash值来作路由,支持所有浏览器,不需要服务器进行任何配置,但是搜索引擎不会处理它,在SEO上表现差
RouteMeta - 路由元信息
当用户希望任意信息附加到路由上,如权限相关字段,自定义配置,过度名称,需要在获取路由时获取的额外信息,就可以通过router
的meta
属性来实现,它可以在路由地址和导航首位上都被访问到
-
配置方式
const routes = [ { path: "/index", component: () => import("@/views/Index"), meta:{ // 任意配置自己所需 isMenu: true, // 是否目录级组件 code: "R-Index" // 目录权限 } } ]
-
使用方式
-
可以在路由守卫中获取使用
router.beforeEach((to, from) => { console.log(to.meta.isMenu); // true console.log(to.meta.code); // R-Index })
-
在组件内部使用监听,获取路由相关信息
watch: { "$route.path":{ handler(){ // do something if(this.$route.path == "/index"){ // 获取meta console.log(this.$route.meta.code); } }, immediate: true // 首次变化也监听 } }
-
RouteLocationRaw - 用户级的路由地址
可以传递给router.push()
,redircet
,并在导航守卫中返回,原始位置可以是一个字符串,比如/index/sign-up
,也可以是一个对象
// 这三种形式是等价的
router.push('/users/posva#bio')
router.push({ path: '/users/posva', hash: '#bio' }) // path必须以编码方式提供
router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' })
// 只改变 hash
router.push({ hash: '#bio' })
// 只改变 query
router.push({ query: { page: '2' } })
// 只改变 param
router.push({ params: { username: 'jolyne' } })
// 调用导航守卫中的 router.pleace()
router.replace({hah:"#bio"})
// 等价于
router.push({hah:"#bio", replace: true})