Vue——vue3路由导航守卫及其写法

导航守卫：一个页面跳转到另一个页面，中间会触发某个函数

导航守卫3个状态

<script>
export default {methods: {},beforeRouteEnter () {console.log('路由进入');},beforeRouteUpdate () {console.log('路由更新');},beforeRouteLeave () {console.log('路由离开');},
}
</script>

第一种写法：全局使用

router\index.js 路由配置文件

// 路由守卫
router.beforeEach((to, from, next) => {console.log(to);// 跳转next()// 返回 false 禁止跳转// return false
})

第二种写法：单个使用

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import Page from '../components/Page.vue'//  定义一些路由
const routes = [{path: '/page', component: Page,beforeEnter: (to, from, next) => {// ...next()console.log(to, 'tototo');}},]// 创建路由实例并传递 `routes` 配置
const router = createRouter({//内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。// history: createWebHashHistory(),history: createWebHistory(),routes, // `routes: routes` 的缩写
})export default router

Vue——vue3路由导航守卫及其写法相关推荐

Vue中路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
vue 设置路由导航守卫控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下在router文件夹下的index.js中添加如下 ...
vue 通过路由导航守卫控制访问权限
1.作用:防止用户跳过登录页面直接从url进入后台管理界面,控制访问权限. 2.实现代码 2.1在router/index.js中添加如下代码, const router = new VueRoute ...
Vue - 路由导航守卫控制访问权限，设置 localStorage 过期时间
Vue 路由导航守卫控制访问权限,设置 localStorage 过期时间一. 路由导航守卫二. 路由导航守卫简单使用三. 使用路由导航守卫设置 token 过期时间导航守卫: https: ...
vue3.2使用vue-wechat-title及路由导航守卫实现浏览器动态标题、替换浏览器的vue小图标
文章目录第一篇.浏览器动态标题一.使用vue-wechat-title设置动态标题 1.安装vue-wechat-title 2.main.ts引入插件 3.在router中的index.ts路由 ...
vue + element-ui 对登录功能、重置表单、退出功能、路由重定向、挂载路由导航守卫的实现
vue + element-ui 对登录功能.重置表单.退出功能.路由重定向.挂载路由导航守卫的实现表单验证规则: 重置表单和对登录功能的验证: 路由重定向: 挂载路由导航守卫: 退出功能的实现 ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
vue路由导航守卫控制访问权限
利用路由的全局前置守卫beforeEach来控制用户的访问权限. 首先是一个登录的页面用户输入完整的信息,点击登录时,会本地存储用户的登录状态,如果在本地存储中存在用户登录过的痕迹,用户可以直接进入 ...
【Vue】vue中的路由导航守卫(路由的生命周期)
文章目录全局前置守卫可选的第三个参数 `next` 全局解析守卫 router.beforeResolve 全局后置钩子路由独享的守卫组件内的守卫可用的配置 API 使用组合 API 完整的 ...

Vue——vue3路由导航守卫及其写法

Vue——vue3路由导航守卫及其写法相关推荐

最新文章

热门文章