【vue3 vue-router 钩子函数】

vue3 vue-router 钩子函数

全局路由守卫（vue-router4.0中将next取消了，可写可不写，return false取消导航，undefined或者是return true验证导航通过）

• router.beforeEach((to,from)=>{}),next是可选参数，可写可不写，return false是取消导航，如果返回值为true或者是undefined意味着通过验证
  (路由跳转之前拦截)
• router.afterEach((to,from)=>{}) （路由跳转之后）语法糖： to.fullPath 可以直接获取 当前的URL路径及传参

路由独享

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

组件中的路由守卫

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

新增的动态路由的添加方法

• addRoute：新添加路由页面(也可以添加子页面路由)

// 添加一级路由
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'); // 删除路由;