【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'); // 删除路由;

你可能感兴趣的:(vue.js,javascript,前端)