Vue3中vue-router钩子函数

最新推荐文章于 2025-04-09 12:11:00 发布

龙井>_<

最新推荐文章于 2025-04-09 12:11:00 发布

阅读量1.5k

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_64664995/article/details/131509439

版权

VueRouter4.0中，全局路由守卫如beforeEach允许在导航发生时进行干预，next是可选的，返回false阻止导航。afterEach用于路由跳转后的操作。路由独享守卫在特定路由上设置拦截。组件内路由守卫包括onBeforeRouteLeave和onBeforeRouteUpdate。动态添加和删除路由的方法涉及addRoute和removeRoute。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.全局路由守卫

vue-router4.0中取消了next，可以不写；return true 或 Undefined 通过导航验证，return false 取消导航。

1. router.beforeEach((to,from)=>{}),next是可选参数，可不写，return false是取消导航，如果返回值为true或者是undefined就是通过验证
(路由跳转之前拦截)

2. router.afterEach((to,from)=>{}) 路由跳转之后，语法糖： to.fullPath 可以直接获取当前的URL路径及传参

2.路由独享守卫

 let routes = [
        {
            path:"/index",
            name:"index",
            component:index,
            beforeEnter:(to,from) =>{
                //to:当用户点击进入当前页面时,进行一些拦截设置
                //from:当来自其他页面进入当前页面的时候，拦截提示用户
                alert('路由独享守卫')
            }
        }
    ]

3.组件内路由守卫

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
        onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后触发
            console.log(to);
        })
        onBeforeRouteLeave((to,from)=>{//离开当前的组件时触发
            alert('')
        })

4.新增的路由添加方法

// 添加一级路由
router.addRoute({
  path:"/router",
  name:"router",
  component:()=>import('../views/router.vue')
})

// 添加二级路由
router.addRoute({ name: 'admin', path: '/admin', component: Admin })//1 父路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })//1 子路由

// * 如果上面做法无效，就添加这行代码
router.replace(router.currentRoute.value.fullPath)//替换当前路由页面的路由


router.removeRoute('router'); // 删除路由;