Inicio rápido de VUE2 (2) --- Agregar página e interceptación de ruta simple

Añadir página

Nueva pagina

Cree un nuevo archivo vue en vistas,
como el archivo Test1125

<template>
  <div>我是狗</div>
</template>

<script>
export default {
     
     
  name: "Test1125"
};
</script>

<style scoped></style>

Agregar ruta

import Vue from "vue";
import VueRouter from "vue-router";
import echartest from "../views/echartest";
import Test1125 from "../views/Test1125";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: echartest
  },
  {
    path: "/te",
    name: "te",
    component: Test1125
  }
];

const router = new VueRouter({
  // mode:'history',
  routes
});

export default router;

modo: 'historial': este control es

si no escribe esto, se verá como la imagen de arriba. Después de escribirlo

Intercepción de ruta

Intercepción simple

La interceptación de rutas permite a los usuarios iniciar sesión cuando navegan por determinadas páginas. Si no han iniciado sesión, interceptarlas y permitirles volver a la página de inicio de sesión o una página específica.

Para mostrar el efecto, agregué otra página. La ruta de la ruta es / tes.
Primero,
agregue
meta: { requireAuth: true } a la ruta y agregue la marca de intercepción a la ruta

{
    path: "/tes",
    name: "tes",
    component: Test1,
    meta: {
      requireAuth: true
    }
  }

Declaramos una variable toGo para que sea verdadera

let toGo = true;

El interceptor de ruta es el siguiente

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (toGo) {
      next();/跳入to
    } else {
      next({
        path: "/te",/跳转路由
        query: { redirect: to.fullPath }/携带原本要跳转的页面路径参数，方便跳回
      });
    }
  } else {
    next();
  }
});

Es fácil ver que beforeEach means
to es la ruta a la que se redirigirá, from viene de, siguiente salta a (si no escribe parámetros, salte a to)
cuando toGo es verdadero, en realidad no está interceptado.

Ahora dejamos que toGo sea falso para
encontrarnos No ingresó / tes porque fue interceptado / te

Y la barra de direcciones se convierte en http: // localhost: 8083 / te? Redirect =% 2Ftes
lleva tes.
Cuando completamos el inicio de sesión o operaciones específicas como la verificación en te, podemos usar este parámetro para retroceder

Escenario de aplicación

Generalmente se usa para controlar si el usuario tiene permiso para ingresar, o cuando el visitante realiza ciertas operaciones que deben ser el usuario, iniciar sesión, etc.

Control de acceso

Por ejemplo, si quiero comprar algo, pero no hay información de inicio de sesión, debo saltar a la página de inicio de sesión.

Anti rastreador

O establezca un valor. Cuando el usuario visita con frecuencia una página cuando no es una persona, será redirigido a la página de verificación. Si el usuario está seguro de verificar la operación, si es una máquina, será interceptada. Por supuesto, la máquina también puede pasar el código de verificación. , Pero también reduce su frecuencia de visitas

  Hola a todos, soy un code husky, un estudiante de ingeniería de redes en la Facultad de Software, porque soy un "perro" y puedo comer carne a miles de kilómetros. Quiero compartir lo que aprendí en la universidad y progresar con todos. Sin embargo, debido al nivel limitado, inevitablemente habrá algunos errores en el blog. Si hay alguna omisión, ¡házmelo saber! Por el momento, solo actualice en la plataforma csdn, la página de inicio del blog: https://blog.csdn.net/qq_42027681 .

未经本人允许，禁止转载

Se lanzará más tarde

Front-end: vue entrada vue subprograma de desarrollo, etc.
Back-end: entrada java entrada springboot, etc.
Servidor: servidor de entrada MySQL instrucciones simples servidor en la nube para ejecutar el proyecto
python: recomendado no calentar, asegúrese de ver
el uso de algunos complementos, etc.

El camino de la universidad también está en uno mismo, estudiar mucho, juventud
con pasión. Si te interesa la programación, puedes unirte a nuestro grupo qq para comunicarnos juntos: 974178910

Si tiene alguna pregunta, puede dejar un mensaje a continuación, le responderé si lo ve