这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战

这篇文章我们来讲一下Router 方法，这是我们经常使用的，我们需要知道怎么去使用它们。

Router 方法

路由增删

addRoute

添加一条新的路由记录作为现有路由的子路由。如果路由有一个 name，并且已经有一个与之名字相同的路由，它会先删除之前的路由。

我们先创建一个路由实例：

const router = createRouter({
    history: createWebHashHistory(),
    routes,
    linkActiveClass: "也笑"
})

addRoute使用如下：

const route={ path: '/about', name: 'about', component: () => import('../views/About.vue') }
router.addRoute(route)

值得我们注意的是：如果路由name重复，会覆盖前面的路由。

当然我们也可以将嵌套路由添加到现有的路由中，使用如下：

router.addRoute('home',route)

removeRoute

类比addRoute，我们可以知道这个方法是通过名称删除现有路由，路由的 name 作为第一个参数，使用如下：

router.removeRoute('about')

上述代码就删除了name===about的路由。

导航守卫

beforeEach

添加一个导航守卫，在任何导航前执行，又称前置守卫。返回一个删除已注册守卫的函数，使用如下：

router.beforeEach(guard=>{
    console.log(guard);
})

当然我们也可以这样用：

router.beforeEach((to, from, failure) => {
    console.log(to, from, failure)
})

to是到达的路由，from是上一个路由，failure表示是否失败。我们可以根据已注册的守卫来做一些事情。

afterEach

添加一个导航钩子，在每次导航后执行，又称后置守卫。返回一个删除注册钩子的函数，类比beforeEach的使用方法。

beforeResolve

添加一个导航守卫，在导航即将解析之前执行。在这个状态下，所有的组件都已经被获取，并且其他导航守卫也已经成功。返回一个删除已注册守卫的函数，使用如下：

router.beforeResolve((to, from) => {
    console.log(to, from)
})

其他操作

go

允许你在历史中前进或后退。一个Number类型参数，相对于当前页面，你要移动到的历史位置，使用如下：

router.go(1)

back

如果可能的话，通过调用 history.back() 回溯历史。相当于 router.go(-1)。

forward

如果可能的话，通过调用 history.forward() 在历史中前进。相当于 router.go(1)。

getRoutes

获取所有路由记录的完整列表，使用如下：

router.getRoutes()

hasRoute

判断是否存在指定名称的路由，使用如下：

router.hasRoute('home')  //true

isReady

当路由器完成初始化导航时，返回一个 Promise，这意味着它已经解析了所有与初始路由相关的异步输入钩子和异步组件。，使用如下：

router.isReady()  //Promise

onError

添加一个错误处理程序，在导航期间每次发生未捕获的错误时都会调用该处理程序。当路由错的时候，我们可以做一些事情，使用如下：

router.onError((error,to,from)=>{
    console.log(error,to,from)
})

push

通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。可以理解为切换路由的方法，使用如下：

router.push('/home')
或
router.push({ path: '/home'})
或
router.push({ name: 'home'})

replace

通过替换历史堆栈中的当前 entry，以编程方式导航到一个新的 URL。其本质也是切换路由，使用方法类比 push。

resolve

返回路由地址的标准化版本。还包括一个包含任何现有 base 的 href 属性。使用方法如下：

router.resolve('/home')

总结

在实际开发中，我们通常使用导航守卫来做权限管理，或者一些特殊的操作。
在实际开发中，我们用到最多的api应该是push了，所以你应该熟练的掌握它，其他的根据你的需求来使用它。

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

回首Vue3之路由篇（四）