vue-router 参数汇总 - 自用

861

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<stringnumber> ...) => string

RouteRecordRaw[]

当用户通过routes option 或者router.addRoutes()来添加路由,可以得到路由记录

  • 单一视图记录: 有一个component配置 (当前页面内只有一个router-view,不需要多个同级窗口)
  • 多视图记录(命名路由): 有一个components(有复数s呦~)配置 (当前页面需要多个router-view通过不同名称区分,e .g:导航区域、头部区域、主体内容区)
  • 重定向记录:没有component相关配置,因为重定向记录永远不会到达(一般我们多用来将 ``地址重定向到初始组件地址)
字段描述类型可选值
path记录的路径,应该以``开头,除非是其他记录的子记录string`/login/users/create`
redirect重定向到具体的路径,发生在所有导航守卫之前,并以新的目标位置触发新的导航(p s.实线变道肯定是要在监控发现之前啊~)stirngRouteLocationRaw对应routerRaw的path
children当前记录的嵌套路由RouteRecordRaw数组
alias路由的别名,允许定义类似记录副本的额外路由所有的aliaspath值必须共享相同的参数stringstring[] (可选)
name路由记录的名称, 唯一性stringsymbol (可选)
beforeEnter在进入特定于此记录的守卫之前的行为
props允许将参数作为props传递给由router-view渲染的组件,当传递给一个多视图记录时,它应该是一个与组件相同键的对象,或者是应用于每个组件的布尔值boBooleanRecord<string, any>[trueobjectfunction](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 - 路由元信息

当用户希望任意信息附加到路由上,如权限相关字段,自定义配置,过度名称,需要在获取路由时获取的额外信息,就可以通过routermeta属性来实现,它可以在路由地址和导航首位上都被访问到

  • 配置方式

    const routes = [
      {
        path: "/index",
        component: () => import("@/views/Index"),
        meta:{  // 任意配置自己所需
          isMenu: true,     // 是否目录级组件
          code: "R-Index"   // 目录权限
        }
      }
    ]
    
  • 使用方式

    1. 可以在路由守卫中获取使用

      router.beforeEach((to, from) => {
        console.log(to.meta.isMenu); // true
        console.log(to.meta.code); // R-Index
      })
      
    1. 在组件内部使用监听,获取路由相关信息

      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})