search
HomeWeb Front-endVue.jsHow to use navigation guards in Vue3
How to use navigation guards in Vue3May 16, 2023 pm 06:58 PM
vue3

    1. What is a navigation guard?

    As its name suggests, the navigation guard provided by vue-router is mainly used to guard navigation by jumping or canceling. There are many ways to build route navigation into it: globally, exclusive to a single route, or at the component level.

    Check the following situation:

    By default, clicking the homepage link can directly enter the specified interface, but this interface requires the user to log in before accessing, which is a problem

    How to use navigation guards in Vue3

    Navigation guards can be set up to detect whether the user is logged in. If he is logged in, he will enter the background page. If he is not logged in, he will force himself to enter the login page, as shown in the figure

    How to use navigation guards in Vue3

    2. What types of navigation guards are there?

    1. Global guards (3)

    Global front guard

    Every time a routing navigation jump occurs, the global front guard will be triggered. Therefore, in the global front guard, programmers can control the access rights of each route

    1. How to use

    You can router/index.js Use router.beforeEach((to, from, next) => {}) in the page to register a global front guard.

    2. Code:

    // router/index.js 页面
    
    router.beforeEach((to, from, next) => {
        console.log(to, from);
        next()
    });
    Global resolution guard
    1. Usage method
    You can use router.beforeResolve to register a global guard. This is similar to router.beforeEach in that it fires on every navigation, but ensures that the parsing guard is called correctly before the navigation is confirmed, and after all in-component guards and async route components are parsed.

    2. Code:

    // router/index.js 页面
    
    router.beforeResolve((to, from, next) => {
        console.log(to,from);
        next()
    })
    Global post-hook
    1. Usage
    You can also register a global post-hook, however Unlike guards, these hooks will not accept the next function nor change the navigation itself:

    2. Code:

    // router/index.js 页面
    
    router.afterEach((to, from) => {
        console.log(to,from);
    })

    They are useful for auxiliary functions such as analysis, changing page titles, and declaring pages. Useful for many other things.

    2. Route exclusive guard (1)

    1. Usage method

    You can define it directly in the routing configurationbeforeEnter Guard:

    2. Code:

    // router/index.js 页面(路由规则中)
    
    const routes = [
    	{
    	    path: '/home',
    	    name: 'Home',
    	    component: HomeView,
    	    beforeEnter: (to, from,next) => {
    	        console.log(to, from);
    	        next()
    	    },
    	}, 
    ]

    3. Guards within the component (3)

    Component There are three internal guards: beforeRouteEnter before the route enters, beforeRouteLeave when the route leaves, and beforeRouteUpdate when the page is updated

    beforeRouteEnter(to, from, next)

    1. How to use
    in the component Used in templates, written at the same level as methods: {}, component routing guards are routing guards written in each separate vue file

    2. Code:

    // vue 组件内使用
    
    onBeforeRouteUpdate((to, from) => {
      //当前组件路由改变后,进行触发
      console.log(to);
    });
    Note: in vue3 The beforeRouterEnter route guard cannot be used in the setup function.

    beforeRouteUpdate(to, from, next)

    1. Usage method
    Use in the component template, with methods: {} is written at the same level. The component route guard is the route guard written in each separate vue file

    2. Code:

    // vue 组件内使用
    
    onBeforeRouteUpdate((to, from) => {
      //当前组件路由改变后,进行触发
      console.log(to);
    });

    beforeRouteLeave(to, from, next)

    1. The usage method is used in the component template, which is written at the same level as methods: {}. The component routing guard is the routing guard written in each separate vue file

    2. Code:

    // vue 组件内使用
    
    onBeforeRouteLeave((to, from) => {
      //离开当前的组件,触发
      alert("我离开啦");
    });

    3. Three parameters of the navigation guard

    • to: The routing information object to be accessed

    • from: The one to be left Routing information object

    • next: Function

      Call next() to indicate release, allow this route navigation

      Call next(false) to indicate no release , this route navigation is not allowed

      Calling next({routerPath}) means navigating to this address. Generally, when the user is not logged in, he will navigate to the login interface

    Tip: This function can appear multiple times in the navigation guard, but can only be called once!!!

    How to use navigation guards in Vue3

    4. How to use beforeRouteEnter in vue3

    If you are using the combined API and setup functions to write components, you can add update and leave guards through onBeforeRouteUpdate and onBeforeRouteLeave respectively. Please refer to the Composition API section for more details.

    For details, please see the official documentation of vue-router
    Navigation Guard | Vue Router

    Method 1. We can use The beforeEnter method intercepts, that is, in router.js:

    {
    	path: '/',
    	name: 'home
    	component: () => import('@/xxx.vue'),
    	beforeEnter: (to, from) => {
    		// 可以在定义路由的时候监听from和to
    	}
    }

    Method 2. We can also use the vue2 writing method and use the optional api to use the beforeRouterEnter hook.

    <script>
    export default {
    	beforeRouteEnter(to, from) {
    		console.log(&#39;before router enter&#39;, to, from)
    	},
    	mounted() {
    		console.log(&#39;mounted&#39;)
    	},
    }

    Five. Simulated login registration case

    // 模拟是否登录(true为登录,false为未登录)
    let token = true
    router.beforeEach((to, from, next) => {
        // 判断有没有登录
        if (!token) {
        	// 如果没有登录,并且是跳转至登录页
            if (to.name == "Login") {
            	// 直接跳转
                next();
            } else {
            	// 否则直接强制跳转至登录页
                router.push(&#39;/login&#39;)
            }
        } else {
        	// 如果已经登录,并且不是跳转至登录页
            if (to.name !== "Login") {
            	// 直接跳转
                next();
            } else {
            	// 否则直接强制跳转至上一个页面
                router.push(from.path)
            }
        }
    });

    The above is the detailed content of How to use navigation guards in Vue3. For more information, please follow other related articles on the PHP Chinese website!

    Statement
    This article is reproduced at:亿速云. If there is any infringement, please contact admin@php.cn delete
    分享两个可以绘制 Flowable 流程图的Vue前端库分享两个可以绘制 Flowable 流程图的Vue前端库Sep 07, 2022 pm 07:59 PM

    前端有没有现成的库,可以直接用来绘制 Flowable 流程图的?下面本篇文章就跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。

    vue是前端css框架吗vue是前端css框架吗Aug 26, 2022 pm 07:37 PM

    vue不是前端css框架,而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架,是基于MVVM设计模式的前端框架,且专注于View层。Vue.js的优点:1、体积小;2、基于虚拟DOM,有更高的运行效率;3、双向数据绑定,让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;4、生态丰富、学习成本低。

    聊聊Vue3+qrcodejs如何生成二维码并添加文字描述聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

    Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

    手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

    利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

    一文深入详解Vue路由:vue-router一文深入详解Vue路由:vue-routerSep 01, 2022 pm 07:43 PM

    本篇文章带大家详解Vue全家桶中的Vue-Router,了解一下路由的相关知识,希望对大家有所帮助!

    手把手带你使用Vue开发一个五子棋小游戏!手把手带你使用Vue开发一个五子棋小游戏!Jun 22, 2022 pm 03:44 PM

    本篇文章带大家利用Vue基础语法来写一个五子棋小游戏,希望对大家有所帮助!

    手把手带你了解VUE响应式原理手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM

    本篇文章我们来了解 Vue2.X 响应式原理,然后我们来实现一个 vue 响应式原理(写的内容简单)实现步骤和注释写的很清晰,大家有兴趣可以耐心观看,希望对大家有所帮助!

    通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

    本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    Repo: How To Revive Teammates
    4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: How To Get Giant Seeds
    3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

    Hot Tools

    SublimeText3 Linux new version

    SublimeText3 Linux new version

    SublimeText3 Linux latest version

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    Atom editor mac version download

    Atom editor mac version download

    The most popular open source editor

    WebStorm Mac version

    WebStorm Mac version

    Useful JavaScript development tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment