vue-router之路由钩子函数应用解析

这篇具有很好参考价值的文章主要介绍了vue-router之路由钩子函数应用解析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue-router是vue开发中不可或缺的一部分,也是vue全家桶生态的重要部分,平时开发vue时会高频率使用,尤其是权限相关模块,那么它除了在routes上的应用外,还有一些钩子函数具体可以应用在哪些地方呢

路由的钩子函数共有6个
全局的路由钩子函数:beforeEach、afterEach
单个的路由钩子函数:beforeEnter
组件内的路由钩子函数:beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

下面我就这些钩子函数做具体解释

全局导航钩子函数
1. vue router.beforeEach(全局前置守卫)
beforeEach的钩子函数,它是一个全局的before 钩子函数,beforeEach在每次每一个路由改变的时候都得执行一遍。
它的三个参数:
to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用)
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法:next(参数或者空) ***必须调用
next:(无参数的时候): 进行管道中的下一个钩子,如果走到最后一个钩子函数,那么 导航的状态就是 confirmed (确认的)
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

应用场景:可进行一些页面跳转前处理,例如判断需要登录的页面进行拦截,做登录跳转

router.beforeEach((to, from, next) => {
    if (to.meta.auth) {
        //判断该路由是否需要登录权限
        if (cookies('token')) {
            //如果存在token,则xxx,如果不存在,那跳转回登录页
            next() //不要在next里面加"path:/", 会陷入死循环,原因是router会终止当前然后不断地跳转
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//将跳转的路由path作为参数,登录成功后跳转到该路由
            })
        }
    }
    else {
        next()
    }
})

进入新的页面时作登录判断、管理员权限判断、浏览器判断等

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('ms_username');
    if(!role && to.path !== '/login'){
        next('/login');
    }else if(to.meta.permission){
        // 如果是管理员权限则可进入,这里只是简单的模拟管理员权限而已
        role === 'admin' ? next() : next('/403');
    }else{
        next();
    }
})

2. vue router.afterEach(全局后置守卫)
router.afterEach是页面加载之后,跟router.beforeEach一样,区别是router.beforeEach是页面加载之前执行,而router.afterEach是页面加载之后执行

3. beforeEnter 路由独享的守卫(路由内钩子)
独享路由守卫beforeEnter配置在指定路由中的, 你可以在route配置上直接定义 beforeEnter 守卫:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

再比如根据当前路由数据判断能不能访问:

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    meta:{ isAuth: false, title:"关于" },
    children:[
    	{
    		path: '/detail',
    		name: 'Detail',
    		component: Detail,
    		meta:{ auth: false, title:"详情" },
    		beforeEnter:(to,from,next) =>{
				if(to.meta.auth){
					if(localStorage.getItem('user')){
						next()//调用next才会往下走
					}
				}else{
					alert("无权限")
				}
    		}
    	}
    ]
  }
]

注意:如果记录有重定向属性,则 beforeEnter 无效。

4.组件内的守卫(组件实例内的导航钩子)
beforeRouteEnter:进入这个组件路由之前
beforeRouteLeave:离开这个组件路由
beforeRouteUpdate:再本路由的下级路由切换才会触发beforeRouteUpdate

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当钩子执行前,组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

实际应用就是组件创建、离开、更新等
beforeRouteEnter是支持给next传递回调的唯一守卫,回调的参数就是当前组件实例,如下:

beforeRouteEnter(to, from, next) {
	console.log("beforeRouteEnter");
	next(vm => {
		console.log("vm", vm);  //vm就是当前组件this
		console.log("data:", vm.data) // 可以获取当前组件的data
		vm.testFun()   //可以执行当前组件的方法
	});
}

beforeRouteLeave应用场景就是在销毁当前组件时触发的处理都可以添加在该钩子函数中,比如组件中有定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清理掉,以免内存泄漏,造成StackOverflowError的错误

beforeRouteLeave (to, from, next) {  
 window.clearInterval(this.timer) //清楚定时器   
 next()
 }

再比如当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转next(false)
如果页面内有重要的信息需要用户保存后才能进行跳转

beforeRouteLeave (to, from, next) {
    localStorage.setItem(name, content); //保存到localStorage中
    next()
}

这就是vue-router钩子函数的基础应用,当然还有很多其他的应用角度。
比如beforeRouteEnter可以结合keep-alive可以实现增加用户体验和节省资源的同时获取钩子节点。
组件在创建时会触发created,但是每次进入路由时都会触发beforeRouteEnter,所以,当一个页面使用了keep-alive进行了缓存时,离开这个页面后再次进入时,不会再触发created,但是会触发beforeRouteEnter,这时候就可以使用路由钩子进行处理了。文章来源地址https://www.toymoban.com/news/detail-800563.html

到了这里,关于vue-router之路由钩子函数应用解析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue-Router】路由入门

    路由(Routing)是指确定网站或应用程序中特定页面的方式。在Web开发中,路由用于根据URL的不同部分来确定应用程序中应该显示哪个内容。 构建前端项目 安装依赖和路由 3. router 使用 login.vue reg.vue index.ts App.vue main.ts router-view 补充: router-view 是Vue Router提供的一个组件,用于

    2024年02月13日
    浏览(39)
  • vue-router路由守卫

    在我们使用vue-router的时候,路由守卫就像监听器、拦截器一样,帮我们做一些鉴权等操作,vue中的路由守卫分为全局路由守卫、独享路由守卫、组件内的路由守卫 全局路由守卫 : beforeEach、 afterEach 组件独享路由守卫 :beforeEnter、 beforeLeave 组件内路由守卫 :beforeRouteEnter、

    2024年02月11日
    浏览(38)
  • vue-router路由模式详解

    目录 一. vue-router(前端路由)有两种模式,hash模式和history模式 二、路由模式解析 三、两种模式的区别 1、hash模式  2、history路由 (3)popstate实现history路由拦截,监听页面返回事件 一. vue-router(前端路由)有两种模式,hash模式和history模式 1.hash 就是指 url 后面的 # 号以及后

    2024年02月03日
    浏览(71)
  • vue-router(路由)详细教程

    路由是一个比较广义和抽象的概念,路由的本质就是 对应关系 。 在开发中,路由分为: ​ 后端路由 ​ 前端路由 后端路由 概念:根据不同的用户 URL 请求,返回不同的内容 本质:URL 请求地址与服务器资源之间的对应关系 [外链图片转存失败,源站可能有防盗链机制,建议将

    2024年02月04日
    浏览(77)
  • 【Vue-Router】路由传参

    list.json login.vue reg.vue App.vue index.ts reg.vue item?.name ,item?.price ,item?.id ,他们如果不使用可选链操作符会出现报错: \\\'__VLS_ctx.item\\\' is possibly \\\'undefined\\\'. login.vue 注意: 传递 params 参数时,若使用 to 的对象写法,必须使用 name 配置项,不能用 path 。 传递 params 参数时,需要提前在规

    2024年02月13日
    浏览(39)
  • vue-router路由懒加载

    路由懒加载指的是打包部署时将资源按照对应的页面进行划分,需要的时候加载对应的页面资源,而不是把所有的页面资源打包部署到一块。避免不必要资源加载。(参考vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue懒加载 ) 这里有三种方式可以

    2023年04月08日
    浏览(42)
  • vue3使用vue-router嵌套路由(多级路由)

    Vue3 嵌套路由的使用和 Vue2 相差不大,主要的区别是 Vue3 的路由实例化使用了 createApp() 方法,所以实例化路由时需要传入根组件。另外,Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外,还新增了 meta prop 和 route prop。 在使用嵌套路由时,建议将路由

    2024年02月03日
    浏览(51)
  • Vue3配置路由(vue-router)

    紧接上篇文章,vue3的配置与vue2是有所差别的,本文就讲述了如何配置,如果本文对你有所帮助请三连支持博主。 下面案例可供参考 使用npm命令进行安装 : npm install vue-router@4 完成后我们打开项目根目录下的 package.json 文件: 如下即为成功 这里创建 view目录,然后在view目录

    2023年04月12日
    浏览(61)
  • 路由,vue-router的基本用法,vue-router的常见用法$route.params、$router.push、$router.replace、$router.go

    路由(英文: router)就是 对应关系 。 SPA指的是一个web网站只有唯一的一个HTML页面, 所有组件的展示与切换 都在这唯一的一个页面内完成。此时, 不同组件之间的切换 需要通过 前端路由 来实现。 *结论:*在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成! 通俗

    2024年01月16日
    浏览(52)
  • Vue3的vue-router路由详解

    这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发,有基础的可以跳过 【三分钟快速搭建Vue3+webpack项目】,直接看以下的内容。 Vue3的vue-router路由详解: 首先安装路由依赖模块: 所需代码文件如下图: 图1   所需要的主要文件: index.html、index.js、App.vue in

    2024年02月01日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包