vue路由钩子函数
如果您想了解如何更好地使用路由器，本文将为您提供实用的设置方法和使用技巧，让您的网络连接更加稳定和高效。
本文内容目录一览：
vue之路由传参，跳转，钩子函数
一.路由传参的三种方式
方式一：query的方式进行，通过添加？的方式传参
App页面配置：
childa页面配置：
方式二：通过id的方式传参，用到params
App页面配置：
childb页面配置：
index.js配置：
方式三：通过props：['id'滚陵]的方式进行id方式的传参，不需要用到params
app页面配置和上面id一样
childb页面配置：
index.js页面：
二.路由的跳转
1.使用push的两种方式进行跳转指定页面
2.添加一级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
3.添加二级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
三，路由的钩子函数（全局和局部）在router的index.js里配置
1.全局路由守卫，每次路由跳转都会执行一遍
router.beforeEach((to,from,next)={
next()//这个必须写
})
to:表示要去的路由，from：表示陪备历之前的路由，next：必须要执行的函数，next表示跳转方法
2.监听全局路由离开芦搜时触发的钩子函数
没有next（）
router.afterEach((to,from)={
})
3.局部路由钩子函数
局部的路由钩子进入路由的时候触发
因为同一个路径参数不同或者是动态路由，不会触发beforeEnter
beforeEnter:(to,from,next)={
next()}
Vue-Router路由钩子函数(导航守卫)
—— “导航”表示路由正在发生改变。
路由钩子函数有三种：
1：全局钩子： beforeEach、 afterEach、beforeResolve
2：单个路由里面的钩子： beforeEnter
3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法
router.beforeEach() 进入之前触发
router.afterEach() 进入之后触发
⑴ beforeEach（全局前置守卫）
使用 router.beforeEach 注册一个全局前置守卫
每个守卫方法接收三个参数：
① to: Route : 即将要进入的目标 路由对象 （to是一个对象，是将要进入的路由对象，可以用 to.path 调用路由对象中的属性）
② from: Route : 当前导航正要离开的路由
③ next: Function : 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数。
next参数：
next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false) : 中断当前的导航。 如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按 钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用扮搜在 router-link 的 to prop 或 router.push 中的选项。
next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航含亮会被终止且该错误会被传递给 router.onError() 注册过的回调。
ps~ : 确保要调用 next 方法，否则钩子就不会被 resolved。
(2). afterEach（全局后置钩子）
和守卫不同的是厅老历，这些钩子不会接受 next 函数也不会改变导航本身
写在路由配置中，只有访问到这个路径，才能触发钩子函数
写在组件中,访问路径，即将渲染组件的时候触发的
beforeRouteEnter 守卫 不能 访问 this ，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
注意~ ： beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以 不支持 传递回调，因为没有必要了。
这个 离开守卫beforeRouteLeave() 通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
路由的钩子函数
vue组建级路由钩子函数介绍
路由钩子函数分为三种类型如下：
第一种：全局钩子函数 。
router.beforeEach((to, from, next) = {
console.log('beforeEach')
//next() //如果要跳转的话，一定要写上next()
//next(false) //取消了导航
next() //正常跳转，不写的话，不会跳转
})
router.afterEach((to, from) = { // 举例: 通过跳转后改变document.title
if( to.meta.title ){
window.document.title = to.meta.title //每个路由下title
}else{
辩局 window.document.title = '默认的title'
}
})
第二种：针对单个路由钩子函数
beforeEnter(to, from, next){
console.log('beforeEnter')
next() //正常跳转，不写的话，不会跳转
携橡让 }
第三种：组件级钩子函数
beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来
console.log("beforeRouteEnter")
console.log(this) //这时this还是undefinde，因为这个时候this实例还没有创建出来
next((vm) = { //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了
vm.text = '改变了'
})
},
beforeRouteUpdate(to, from, next){//可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是如中否需要更新
console.log('beforeRouteUpdate')
next();
},
beforeRouteLeave(to, from, next){// 当离开组件时，是否允许离开
next()
}
知道如何设置和管理无线网络和路由器是非常重要的，希望这篇文章可以帮助您更好地掌握这些知识。
