玄武网站建设,html静态网站开发自我介绍,网站建设费属于宣传费吗,免费网站的app文章目录 全局导航守卫路由独享导航守卫组件内的守卫完整的导航解析流程loadingBar 案例 全局导航守卫 beforeEachbeforeResolveafterEach 路由导航守卫 beforeEnter 组件导航守卫 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
全局导航守卫
当一个导航触发时#x… 文章目录 全局导航守卫路由独享导航守卫组件内的守卫完整的导航解析流程loadingBar 案例 全局导航守卫 beforeEachbeforeResolveafterEach 路由导航守卫 beforeEnter 组件导航守卫 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
全局导航守卫
当一个导航触发时全局前置守卫按照创建顺序调用。
守卫是异步解析执行此时导航在所有守卫 resolve 完之前一直处于等待中。参数说明
to: Route 即将要进入的目标 路由对象
from: Route当前导航正要离开的路由
next(): 进行管道中的下一个钩子。如果全部钩子执行完了则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)那么 URL 地址会重置到 from 路由对应的地址。
next(/) 或者 next({ path: / }): 跳转到一个不同的地址。当前的导航被中断然后进行一个新的导航。全局前置守卫
router.beforeEach((to,from,next){if(xxxxx){next(/login)}else{next()}
})全局解析守卫
注意:解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用
router.beforeResolve((){})全局后置钩子
守卫不同的是这些钩子不会接受 next 函数也不会改变导航本身
它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用
router.afterEach((to, from) {sendToAnalytics(to.fullPath)
})案例
const whileList [/]router.beforeEach((to, from, next) {let token localStorage.getItem(token)//白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面if (whileList.includes(to.path) || token) {next()} else {next({path:/})}
})路由独享导航守卫
const routes [{path: /users/:id,component: UserDetails,beforeEnter: (to, from) {// reject the navigationreturn false},},
]beforeEnter 守卫 只在进入路由时触发不会在 params、query 或 hash 改变时触发。例如从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时才会被触发。
beforeEnter作用的是目标路由对象
组件内的守卫
const UserDetails {template: ...,beforeRouteEnter(to, from) {在渲染该组件的对应路由被验证前调用不能获取组件实例 this 因为当守卫执行时组件实例还没被创建},beforeRouteUpdate(to, from) {在当前路由改变但是该组件被复用时调用举例来说对于一个带有动态参数的路径 /users/:id在 /users/1 和 /users/2 之间跳转的时候由于会渲染同样的 UserDetails 组件因此组件实例会被复用。而这个钩子就会在这个情况下被调用。因为在这种情况发生的时候组件已经挂载好了导航守卫可以访问组件实例 this},beforeRouteLeave(to, from) {在导航离开渲染该组件的对应路由时调用与 beforeRouteUpdate 一样它可以访问组件实例 this},
}完整的导航解析流程
导航被触发在之前失活的组件触发beforeRouterLeave调用全局前置守卫beforeEach如果是重用的组件/user/:id调用beforeRouterUpdate更新组件然后执行路由守卫beforeEnter解析异步路由组件然后执行组件内的beforeRouterEnter然后会调用全局解析守卫beforeResolve这时候导航已经被确认了调用全局后置钩子afterEach触发 DOM 更新调用 beforeRouteEnter 守卫中传给 next 的回调函数创建好的组件实例会作为回调函数的参数传入。 loadingBar 案例
templatediv classwrapsdiv refbar classbar/div/div
/templatescript setup langts
import { ref, onMounted } from vue
let speed refnumber(1)
let bar refHTMLElement()
let timer refnumber(0)
const startLoading () {let dom bar.value as HTMLElement;speed.value 1timer.value window.requestAnimationFrame(function fn() {if (speed.value 90) {speed.value 1;dom.style.width speed.value %timer.value window.requestAnimationFrame(fn)} else {speed.value 1;window.cancelAnimationFrame(timer.value)}})}const endLoading () {let dom bar.value as HTMLElement;setTimeout(() {window.requestAnimationFrame(() {speed.value 100;dom.style.width speed.value %})}, 500)}defineExpose({startLoading,endLoading
})
/scriptstyle scoped langless
.wraps {position: fixed;top: 0;width: 100%;height: 2px;.bar {height: inherit;width: 0;background: blue;}
}
/stylemain.ts
import loadingBar from ./components/loadingBar.vue
const Vnode createVNode(loadingBar)
render(Vnode, document.body)
console.log(Vnode);router.beforeEach((to, from, next) {Vnode.component?.exposed?.startLoading()
})router.afterEach((to, from) {Vnode.component?.exposed?.endLoading()
})
