“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

This section describes the parameters of the route guard

import Vue from "vue"; import VueRouter from "vue-router"; import Home from ".. /views/home.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: Home, }, { path: "/about", name: "About", component: () => import("../views/About.vue"), }, ] const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes, }); // It takes three arguments, to==> which route to go to, form==> which route to come from, Router. beforeEach((to, form, next) => {console.log(" beforeEach route switch, ") next()}) export default router;Copy the code

Permissions require route guards

Now we have a requirement that if we want to go to the RichText page; The value of user must be equal to admin. Let user='user' // to==> to which route, // form ==> from which route, // next whether to allow to a certain route, Router.beforeeach ((to, form, next) => {console.log(' to',to); if (to.path == '/richtext') { if (user == 'admin') { next(); } else {alert(' you are not the administrator ')}} else {next()}})Copy the code

Yuan routing meta

Most of the time, we need to place one information on each route. We can place one information on the matA simply as follows: {path: "/zujian", name: "zujian", meta: {user: Admin, info:' I'm admin', key:'key-value '}, Component: () => import(".. /views/zujian.vue"), },Copy the code

Global rear route guard

Router.aftereach ((to,form) => {console.log('to', to,form); console.log('form',to,form); }}}}}}}}}}} And guard the wool. Shit! You're right. I'm done switching. Do we still need you to guard? You can go back to work. Is it really of no use? No, it doesn't. It does work; AfterEach ((to,form) => {console.log('to', to); router.aftereach ((to,form) => {console.log('to', to); console.log('form', form); document.title=to.mata.title })Copy the code