Detailed explanation of Vue router routing guard

1. Global beforeEach

When the name stored in Local Storage is zhangsan, the message content will be displayed only when the message is clicked

1. Global beforeEach

Add a routing guard to the router beforeEach

grammar:

router.beforeEach((to, from, next)=>{})

Function: Call the function in beforeEach during initialization and before each route switch

parameter:

1.to: target route

2.from: the route before the jump

3.next: release

2. Implementation

2. Requirement 2

If there are many paths that need to be judged before jumping, you need to write a lot of judgment code, and the judgment structure will be very complicated.

At this time, you can put a meta tag in the route that needs to be judged.

The meta tag provides metadata about the HTML document (metadata refers to data used to describe data)

At this time, you can use the tag field in meta to make a judgment

3. Global post-guard afterEach

The usage of afterEach and beforeEach is basically the same.

The difference is that afterEach does not have the next parameter

1. Change the title to your own title

Assign each route its own title name

const router = new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/home',
      component: Home,
      meta: {
        title: "Home"
      },
      children: [ 
        {
          name: "xiaoxi",
          path: 'message',
          component: Message,
          meta: {
            title: "News"
          },
          children: [
            {
              name: 'xiangqing',
              path: 'detail',
              component: Detail,
              meta: {
                isAuth: true,
                title: "Message Details"
              }
            }
          ]
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: "About"
      }
    }
  ]
})

Modify the title name in beforeEach

router.afterEach((to, from) => {
  document.title = to.meta.title || "Test"
})

4. Guarding within components

1. beforeRouteEnter

Called when entering this component through routing rules

2. beforeRouteLeave

Called when leaving the component through routing rules

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!