Vue-router4.0接口快速识别

Vue-router4.0接口快速识别

<router-link> ：将会被渲染a标签

属性名	属性类型	属性作用
to	string/object	相当于跳转调用router.push(string/object)
replace	boolean	配合to相当于跳转调用router.replace(string/object)
active-class	string	链接激活时a标签的样式
custom	boolean	是否应该将其内容包裹在 元素中

<router-view> ：配合v-slot使用实现路由动画和路由数据持久化

//  VNodes, 传递给 <component>的is prop。route:路由
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition || 'fade'" mode="out-in">
    <keep-alive>
      <suspense>
        <template #default>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
        </template>
        <template #fallback> Loading... </template>
      </suspense>
    </keep-alive>
  </transition>
</router-view>

路由属性

属性名称	属性类型	属性作用
currentRoute	当前页面路由对象	当前路由地址。只读的
options	createRouter的配置	创建 Router 时传递的原始配置对象。只读的

路由选项

选项名称	选项类型	选项作用
history	createWebHistory  createWebHashHistory      createMemoryHistory	使路由实现历史记录
linkActiveClass/linkExactActiveClass	string	链接激活时的样式
parseQuery	function/qs.parse	参数转json
stringifyQuery	funciton/qs.stringify	参数转string
routes	RouteRecordRaw[]	初始路由列表
scrollBehavior	RouterScrollBehavior	在页面之间导航时控制滚动的数。可以返回一个 Promise 来延迟滚动

路由方法

方法名称	方法参数	方法作用
addRoute	parentName:string | symbol         route:RouteRecordRaw	有parentName参数添加一条新的路由记录作为现有路由的子路由，没有则新增一条路由记录，重名会替换，添加路由并不会触发新的导航
beforeEach	to,from,type(导航失败的类型)	路由前置守卫
beforeResolve	to,from,type	路由解析守卫
afterEach	to,from,type	路由后置守卫
back		调用history.back()，相当于 router.go(-1)
forward		调用 history.forward() ，相当于 router.go(1)。
getRoutes		获取所有 路由记录的完整列表
go	num:number	前进或后退路由
hasRoute	name:string	路由表中是否有指定名称的路由
push	object:RouteLocationRaw	在历史堆栈中推送一个路由
removeRoute	name:string	通过名称删除现有路由。
replace	name:string	替换历史堆栈中的该路由