[Vue3] Protección de navegación de enrutamiento y enrutamiento de Vue-Router

Enrutamiento de etapas de separación de front-end y back-end

• Con la aparición de Ajax, existe un modelo de desarrollo con separación de front-end y back-end.
• El back-end proporciona API para devolver datos, el front-end obtiene datos a través de Ajax y los representa en la página a través de js.
• ventaja. Responsabilidades claras de front-end y back-end

Etapa de aplicación enriquecida de una sola página

• La característica más importante de SPA es agregar una capa de enrutamiento de front-end sobre la base de la separación de front-end y back-end.
• Es decir, el front-end mantiene un conjunto de reglas de enrutamiento.
• Principal, al cambiar la URL, la página no se actualiza en su totalidad

¿Cómo logra el enrutamiento front-end la asignación de URL y contenido?

• Escuche los cambios de URL

hash de URL

• El hash de la URL es el punto de anclaje (#), que esencialmente cambia los atributos window.location y href.
• Podemos cambiar y href asignando directamente location.hash (pero la página no se actualiza)

Historia de las URL

• Agregado en HTML5, hay 6 modos para cambiar la URL sin actualizar la página
• replaceState, reemplaza la ruta original
• pushState, usando la nueva ruta
• popState, alternativa para la ruta
• ir, cambiar de camino hacia adelante o hacia atrás
• Adelante, cambia el camino hacia adelante.
• atrás, cambiar el camino hacia atrás

Uso básico de Vue-Router

• Creación de una aplicación de página única (SPA) con Vue-Router
• 1. Cree un objeto de enrutamiento
• 2. Establecer una relación de mapeo
• 3. Deje que el objeto de enrutamiento surta efecto
• 4. Monte el enrutador
• 5. Vista del enrutador que ocupa el lugar
• 6, conmutación de enrutamiento de enlace de enrutador

1. Instale el enrutador Vue

npm install vue-router

2. Cree index.js en el archivo de enrutador de la nueva página, ruta, página de importación, ruta de importación, cree una relación de enrutamiento

• createWebHashHistory: se refiere al enrutamiento con modo hash, como /#/order/detail con # ruta
• createWebHistory: enrutamiento basado en la API de historial nativo html5
• createMemoryHistory: gestiona implícitamente el enrutamiento según la información de la memoria, adecuado para escenarios SSR

import {
    
     createRouter,createWebHashHistory  } from 'vue-router'
//导入
import Home from "../Views/home.vue"
import About from "../Views/about.vue"
//创建路由对象,//建立映射关系
const router = createRouter({
    
    
    history:createWebHashHistory (),//用于指定采用的模式。目前式哈希模式
    routes: [
    	//一般开发里面都会写一个重定向的路径
       {
    
    
            path: '/', redirect: "/home"
        },
        {
    
    
            path: '/home', component: Home
        },
        {
    
    
            path: '/about', component: About
        }
    ]
})

//导出
export default router

3, principal.js

import {
    
     createApp } from 'vue'
import App from './App.vue'

//再次导入,告诉app，注意这里的使用方式
import router from './router/index'
createApp(App).use(router).mount('#app')

3. Dentro de la aplicación.vue

<template>
  <p>标题</p>
  <router-view></router-view>
  <div class="nev">
    <router-link to="Home">Home</router-link>
    <router-link to="about">about</router-link>
  </div>
</template>
<script setup>
</script>

<style>
#app {
    
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

atributo de enlace de enrutador

• 1. El atributo de reemplazo, el atributo de reemplazo, no existirá en el historial.

<router-link to="Home" replace>Home</router-link>

• 2. El atributo to puede ser una cadena o un objeto.

<router-link to="Home" replace>Home</router-link>
<router-link :to="{path:'/about'}">about</router-link>

• 3. atributo de clase activa
• Configure la clase aplicada después de activar el elemento a, el valor predeterminado es router-link-active

.router-link-active{
    
    
  color :blue;
}

• 4, atributo de clase activa exacta
• Cuando el enlace se activa con precisión, la clase utilizada para la representación, el valor predeterminado es router-link-exact-active

Enrutamiento del procesamiento de subpaquetes de carga diferida

• Puede mejorar la eficiencia de renderizado de la primera pantalla.

//如果想要分包
const Home=()=>import("../Views/hone.vue")
const About=()=>import("../Views/about.vue")

Otras propiedades de las rutas.

• atributo de nombre, el nombre único del registro de enrutamiento, puede especificar el nombre para saltar cuando salta la página
• Meta atributo, poner atributos personalizados
  

Enrutamiento dinámico y anidamiento de enrutamiento

1. Coincidencia básica de enrutamiento dinámico

• Por ejemplo: hay una página de componentes, el usuario debe pasar la identificación de usuario para ingresar, pero la identificación es diferente
• Por lo tanto: en vue router, puede usar un campo dinámico en la ruta para lograrlo, llamado parámetro de ruta.
• /:parámetro
  

2. Si desea obtener los parámetros pasados ​​en la página vue

• Tómalo en la plantilla.

<template>
  <div><p>about的参数{
    
    {
    
    $route.params.id}}</p></div>
</template>

• Consíguelo en la API de Vue2

 this.$route.params.id

• Consíguelo en la API de Vue3
• Pero existen desventajas: el cambio de impresión hacia adelante y hacia atrás solo se realiza una vez

<script setup>
  import {
    
    useRoute} from "vue-router"
  //获取router跳转的id
  const route = useRoute()
  console.log(route.params.id)
</script>

• Solución: quiero monitorear los cambios del enrutador de enrutamiento en vue3
• Agrega un protector de navegación que se activa cuando la posición actual está a punto de actualizarse.

<script setup>
  import {
    
    onBeforeRouteUpdate} from "vue-router"
  //获取router跳转的id
  onBeforeRouteUpdate((to,from)=>{
    
    
    console.log(to,from)
    console.log("form",from.params.id)
    console.log("to",to.params.id)
  })
</script>

No foneado

• Si desea que los usuarios no puedan hacer coincidir la página, los siguientes componentes se mostrarán automáticamente
  
  
  

• Si desea analizar la ruta, agregue un * después para analizarla en una matriz
  
  

Uso anidado de rutas

• Tenga en cuenta que las rutas anidadas que comienzan con / se tratarán como rutas raíz. Esto le permite aprovechar el anidamiento de componentes sin tener que utilizar URL anidadas.
• 1. Agregue el atributo niños [] en la primera capa de enrutamiento.

 {
    
    
            name: "home",
            path: '/home',
            component: Home,
            children: [
                {
    
    
                    path: '/about',
                    component: About
                }
            ]
        },

• 2, agregue el componente de inicio

 <router-view></router-view>

• 3, salto de ruta

Navegación programática para enrutamiento

Navegación, método router.push

Recibir datos de consulta

Método router.replace(), reemplaza la página actual

método router.back(n), volver a la página anterior o n páginas

El método router.forward(n) avanza un paso o n pasos

router.go(n), avance o retroceso de página, n es positivo o negativo

History.back(), el historial de retroceso es equivalente a router.go(-1)

History.forward(), reenviar en el historial es equivalente a router.go(1)

Gestionar dinámicamente objetos de enrutamiento

Agregar rutas dinámicamente

• escenas a utilizar
• Por ejemplo, según diferentes permisos de usuario, registre diferentes rutas
• En este momento, puedes usar un método addRoute
• Similar a lo siguiente, si tiene permiso, agregue una ruta

let isAdmin = true
if(isAdmin){
    
    
    router.addRoute({
    
    
        path:"/Admin",
        component:Admin
    })
}

Agregar dinámicamente rutas secundarias

• router.addRoute(nombrepadre, ruta)
• Donde parentName es el campo de nombre definido por la ruta principal.
• Nota: No agregue "/" delante de la ruta de subenrutamiento
• También tenga en cuenta que debe haber una vista de enrutador de marcador de posición en la ruta principal.

let isAdmin = true
if(isAdmin){
    
    
    router.addRoute({
    
    
        name:"Admin",
        path:"/Admin",
        component:Admin
    })
    router.addRoute('Admin',{
    
    
        path:"Adminchild",
        component:Adminchild
    })
}

Eliminar ruta uno

• Agregue una ruta con el mismo nombre y esta última puede anular la ruta anterior, lo que equivale a eliminar la ruta anterior.
  

Eliminar ruta método 2

• A través del método removeRoute, pase el nombre de la ruta

router.removeRoute('home')

Eliminar ruta método tres

• El objeto almacenado en addRoute

const delrouter = router.addRoute({
    
    
    name: "home",
    path: '/home',
    component: Home,
    children: [
        {
    
    
            path: '/about',
            component: About
        }
    ]
})
delrouter()

Otros métodos de enrutamiento de objetos

Comprobar si la ruta existe

• enrutador.hasRoute

Obtenga todos los objetos de enrutamiento asignados en el objeto de enrutamiento

• enrutador.getRoutes()

console.log(router.getRoutes())

advertencia de compilación

Guardia de navegación de ruta

Protector de navegación frontal

• La protección de navegación proporcionada por vue-router se utiliza principalmente para proteger la navegación saltando o cancelando
• La preguardia global beforeEach se vuelve a llamar cuando se activa la navegación

• tiene dos parametros

• a: el objeto de ruta que está a punto de ingresar
• from: Objeto de ruta a punto de salir
• También hay un tercer parámetro opcional a continuación, que se usa en vue2 para decidir cómo saltar

• tiene valor de retorno

• falso, cancela la navegación actual
• No regresar o indefinido, navegación predeterminada
• devolver una dirección de ruta

• Puede ser una ruta de tipo cadena

• Puede ser un objeto que contiene ruta, consulta, parámetros y otra información.

// 路由导航拦截
// - 进行任何的路由跳转之前，传入到beforeEach中的函数都会被回调
router.beforeEach((to,from)=>{
    
    
    //不写条件会在登录页陷入死循环
    if(to.path!='/login'){
    
    
        return "/login"
    }
})

• Escenarios de uso comunes
• Antes de ingresar a la página de inicio, determine si el usuario ha iniciado sesión

// 路由导航拦截
router.beforeEach((to, from) => {
    
    
    const token = localStorage.getItem("token")
    if (!token && to.path == '/home') {
    
    
        return "/login"
    }
    return undefined//否则默认导航
})

Proceso completo de análisis de navegación.

• 1. Se activa la navegación.
• 2. Llame al guardia beforeRouteLeave() en el componente desactivado.
• 3. Llame al guardia global beforeEach()
• 4. Llame al guardia beforeRouteUpdate() en el componente reutilizado y la instancia del componente no se puede usar.
• 5. Llame a beforeEnter() en la configuración de enrutamiento.
• 6. Analizar el componente de enrutamiento asincrónico ()=>importar(…/xxx)
• 7. Llame a beforeRouterEnter() en el componente activado.
• 8. Llame a global beforeReasolve (), después de analizar el componente, antes del salto.
• 9. Se confirma la navegación.
• 10. Llame al gancho global afterEach(),
• 11. Activar la actualización de DOM
• 12. Llame a la función de devolución de llamada pasada a next en la protección beforeRouteEnter() y la instancia del componente creado se pasará como parámetro de la función de devolución de llamada.