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

vue3 vue-router 钩子函数相关推荐

Vue3 生命周期钩子函数
一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() : 组 ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
Vue的钩子函数是什么意思?Vue都有哪些钩子函数？
Vue的钩子函数是什么意思?Vue都有哪些钩子函数? Vue钩子函数就是指在一个Vue实例从创建到销毁的过程自动执行的函数. beforeCreate:在Vue实例创建之前执行. Created:在V ...
c语言中的钩子函数,生命周期（vue的钩子函数）
生命周期图示创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建' ...
vue3生命周期钩子函数
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图代码 // 通过配置项 beforeCreate () { console.log('beforeCreate'); }, created ...
Vue3 - 生命周期钩子函数（组合式 API）
前言 Vue 是组件化编程,从一个组件诞生到消亡会经历很多过程,这些过程就叫做生命周期.而伴随着生命周期,给用户使用的函数,就叫钩子函数,实际为操控生命周期. 本文主要对比 Vue2 生命周期,引出并 ...
vue的钩子函数created以及mounted的示意(转载)
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
VUE——使用钩子函数
指令定义函数提供几个钩子函数 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调 ...
Vue 路由钩子函数
路由钩子函数分为三种: 全局前置守卫 router.beforeEach全局解析守卫 router.beforeResolve全局后置钩子 router.afterEach路由独享的守卫 before ...

vue3 vue-router 钩子函数

vue3 vue-router 钩子函数相关推荐

最新文章

热门文章