vuevue前端框架

vue3 vue-router 钩子函数

2021-12-08  本文已影响0人  微笑的弧度_c50f
全局路由守卫(vue-router4.0中将next取消了,可写可不写,return false取消导航,undefined或者是return true验证导航通过)
路由独享
 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('我离开啦')
        })
新增的动态路由的添加方法
// 添加一级路由
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'); // 删除路由;
上一篇下一篇

猜你喜欢

热点阅读