Tabla de contenido
patrón de enrutamiento del navegador
Configuración (/src/router/index.js)
Campos de configuración para tablas de enrutamiento
Vista con nombre (pantalla hermana)
Metainformación de enrutamiento (meta, cualquier información adicional, como autorización)
valor del atributo de ubicación
consulta (explícita) lleva información auxiliar
params (explícito/implícito (al actualizar la página desaparecerá)) interfaz diferencial
Enrutamiento dinámico (diferentes parmas, acceso al mismo componente)
Enrutamiento programático (modo sin vínculo)
función de devolución de llamada del cargador (activada antes del enrutamiento)
Guardia (autoridad, interceptación de ruta)
Proceso de análisis de navegación
/src/components/BeforeEach.jsx
El navegador ingresa la URL para mostrar el componente correspondiente de la ruta
Marcador de posición de Vue vista de enrutador\enlace de enrutador
Reaccionar marcador de posición Outlet\Link
Duplicación de navegación (método de prototipo modificado)
Enrutamiento: muestra diferentes contenidos de acuerdo con diferentes direcciones URL , administrador de rutas para SPA (aplicación de página única)
Instalar
Vue3 está emparejado con Vue Router4, y otros usos no han cambiado mucho con respecto a vue2
//Vue.use() 方法进行安装和注册VueRouter插件
//自动调用插件对象中的 install 方法
Vue.use(VueRouter);npm instalar vue-router
npm i reaccionar-enrutador-dom
patrón de enrutamiento del navegador
historyEl modo utiliza la API de historial del navegador para ocultar caracteres adicionales en la URL, adecuado para la mayoría de los entornos de navegador generales.- El enrutamiento es más hermoso sin usar símbolos hash
#. - Puede aprovechar al máximo las funciones de avance y retroceso del navegador.
- Se requiere soporte de configuración del servidor para garantizar que se devuelva la página correcta al acceder a la ruta directamente.
- La API de historial de HTML5 supervisa los cambios de URL, por lo que existen problemas de compatibilidad con el navegador.
//Vue 2.x 或 3.x Options API
const router = new VueRouter({
mode: 'history',
routes
});
// Vue 3.x Composition API
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes
})hashEl patrón utiliza un valor hash en la URL (#puede implementar la navegación de rutas al escuchar los cambios de hash)- No se requiere soporte de configuración del servidor (no se envían hashes al servidor)
- Adecuado para casos en los que la API de historial no es compatible o se requiere compatibilidad con navegadores más antiguos.
- No hace un uso completo de las funciones de avance y retroceso del navegador, solo hay una entrada en el historial.
- Escuche el cambio de evento onhashchange() del navegador a través de window.addEventListener para encontrar las reglas de enrutamiento correspondientes
//Vue 2.x 或 3.x Options API
const router = new VueRouter({
mode: 'hash',
routes
});
// Vue 3.x Composition API
import { createRouter, createWebHashHistory} from 'vue-router';
const router = createRouter({
history: createWebHashHistory(),
routes
})- No se especifica ningún modo de enrutamiento, elegirá automáticamente el modo apropiado de acuerdo con el entorno actual.
const router = new VueRouter({
routes
})configurar( /src/router/index.js )
Campos de configuración para tablas de enrutamiento
-
ruta: especifique la ruta
-
elemento (React)/componente (Vue): componente correspondiente
-
niños: rutas anidadas
vista
ruta nombrada (nombre)
Codificación/descodificación automática de parámetros
{
path: '/about/foo/:id',
name: 'foo',
component: Foo
}
{ name: 'foo', params: {id: 123} }Vista con nombre (pantalla hermana)
Metainformación de enrutamiento (meta, cualquier información adicional, como autorización)
meta: { auth: false }
this.$route.meta.auth
import { useLocation, matchRoutes, Navigate } from 'react-router-dom'
import { routes } from '../../router';
export default function BeforeEach(props) {
const location = useLocation();
const matchs = matchRoutes(routes, location)
const meta = matchs[matchs.length-1].route.meta
if(meta.auth){
return <Navigate to="/login" />
}
else{
return (
<div>{ props.children }</div>
)
}
}
pasar parámetros
parámetro de URL
http://example.com/page?param1=value1¶m2=value2#section1
| ? | Separe la URL real y los parámetros |
| & | Separador entre parámetros especificados en la URL |
| = | El lado izquierdo es el nombre del parámetro, el lado derecho es el valor del parámetro |
| # | Anchor (Ancla), utilizado para identificar una ubicación o elemento específico en el documento, Usado solo en el lado del cliente y procesado por el navegador, no enviado al servidor Indica al navegador que se desplace hasta |
valor del atributo de ubicación
ventana
El objeto global de la ventana, que representa la página actual http://www.example.com/path/index.html
ventana.ubicación.href: obtener/establecer URL
window.location.orgin: secciones de protocolo, nombre de host y número de puerto
//https://www.example.com:8080/page.html
// :// :
//https%3A%2F%2Fwww.example.com%3A8080。
encodeURIComponent(window.location.origin)
//encodeURIComponent用于将字符串中的特殊字符(空格、&、+、= 、?)转换为编码形式，确保URL中不包含任何无效字符
//查询参数时 或者 动态参数时 需要encodeURIComponent
const url = 'https://example.com/api?param=' + encodeURIComponent(queryParam);
window.location.href =`https://www.example.com/path/to/resource.html/domain=${location.host}&req=${encodeURIComponent(location.pathname)}&protocol=https${location.hash}`ventana.ubicación.protocolo: protocolo http
ventana.ubicación.host: host + puerto (host:8080)/dirección IP (127.123.32.1 única)/nombre de dominio (www.example.com mnemotécnico)
ventana.ubicación.nombre de host: host host
ventana.ubicación.puerto: puerto 8080
window.location.pathname: ruta del recurso ruta/index.html, recurso index.html
ventana.ubicación.hash:
ventana.ubicación.búsqueda: buscar
var searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('name')); // 输出 "John"usarUbicación()
importar {useLocation} desde 'react-router-dom'
-
hash: valor hash
-
clave: identificador único
-
nombre de ruta: ruta
-
búsqueda: valor de consulta (necesita analizar la cadena en un objeto).
-
estado: datos implícitos
consulta (explícita) lleva información auxiliar
ruta: '/usuario/',
$ruta.consulta
import { useSearchParams } from 'react-router-dom'
const [searchParams, setSearchParams] = useSearchParams()
console.log( searchParams.get('age') );
const handleClick = () => {
setSearchParams({ age: 22 })
}params (explícito/implícito (al actualizar la página desaparecerá)) interfaz diferencial
$ruta.parámetros
Explícito: ruta: '/usuario/:id',
Implícito: ruta: '/usuario/',
consulta explícita /workbenchConfiguration/upload ?wpReleId= 59
params explícito /workbenchConfiguration/upload / 59
Enrutamiento dinámico ( diferentes parmas , acceso al mismo componente)
import { Outlet, Link } from 'react-router-dom'
export default function About() {
return (
<div>
<Link to="/about/foo/123">foo 123</Link> | <Link to="/about/foo/456">foo 456</Link>
</div>
)
}
//...
{
path: 'foo/:id',
element: <Foo />
}
//...
import { useParams } from 'react-router-dom'
export default function Foo() {
const params = useParams()
return (
<div>Foo, { params.id }</div>
)
}
//Vue与React唯一不同
this.$route.params.id Enrutamiento programático (modo sin vínculo)
//vue
this.$router.push({
path: `/about/foo/${id}`
})
//react
import {useNavigate } from 'react-router-dom'
const navigate = useNavigate()
const handleClick= () => {
navigate('/about/foo/123')
}Ruta predeterminada (sin coincidencia), ruta de redirección (redireccionar/Navegar), 404 (*/errorElement)
vista
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
const About={template:'<div>About</div>'}
const routes: Array<any> = [
{
path: '/',
redirect: '/workbenchConfiguration'
},
{
path: '/404',
meta: { title: '404' },
component: () => import('@/views/404.vue')
},
{ path: '*', redirect: '/404' }
]
const router = new VueRouter({
routes
})Reaccionar
import { createBrowserRouter, createHashRouter } from 'react-router-dom'
//路由表
export const routes = [
// 默认路由
{
index: true,
//重定向
element: <Navigate to="/about/foo/123" />,
//自带errorElement
errorElement: <div>404</div>,
},
//*局部404
{
path: '*',
element: <div>404</div>
}
];
//路由对象
const router = createBrowserRouter(routes);
export default router;función de devolución de llamada del cargador (activada antes del enrutamiento)
Sincronización por defecto, cooperar con la redirección para interceptar permisos.
{
path: 'bar',
element: <Bar />,
//async，await异步，Promise用于表示一个异步操作的最终完成（或失败）及其结果值。
loader: async() => {
let ret = await new Promise((resolve)=>{
setTimeout(()=>{
resolve({errcode: 0})
}, 2000)
})
return ret;
}
}useLoaderData() obtiene los datos devueltos por la función del cargador
import { useLoaderData } from 'react-router-dom'
export default function Bar() {
const data = useLoaderData()
console.log(data)
return (
<div>Bar</div>
)loaderNo hay forma de usar el componente <Navegar> para la redirección en la función
{
path: 'bar',
element: <Bar />,
loader: async() => {
let ret = await new Promise((resolve)=>{
setTimeout(()=>{
resolve({errcode: Math.random() > 0.5 ? 0 : -1})
}, 2000)
})
if(ret.errcode === 0){
return ret;
}
else{
return redirect('/login')
}
}
}entrada principal
//index.js
import { RouterProvider } from 'react-router-dom'
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);Guardia (autoridad, interceptación de ruta)
Proceso de análisis de navegación
-
Se activa la navegación.
-
Llamar guardias en componentes desactivados
beforeRouteLeave. -
Llame a la guardia global
beforeEach. -
beforeRouteUpdateProtectores de llamadas (2.2+) en componentes reutilizables . -
Llamado en la configuración de enrutamiento
beforeEnter -
Analizar componentes de enrutamiento asíncronos.
-
Llamado en el componente activado
beforeRouteEnter. -
Llama a la guardia global
beforeResolve(2.5+). -
Se confirma la navegación.
-
Llame al gancho global
afterEach. -
Activa una actualización de DOM.
-
Llame a la función de devolución de llamada
beforeRouteEnterpasada en el guardnexty la instancia del componente creado se pasará como el parámetro de la función de devolución de llamada.
global
vista
//to
router.beforeEach((to, from, next)=>{
if(to.meta.auth){
next('/');
}
else{
next();
}
})
//vue+ts
router.beforeEach((to: any, from: any, next: any) => {
const metaTitlt = (to.meta && to.meta.title) || ''
document.title = `${metaTitlt} - 默认模版`
//是否从根路径而来，当前路由的来源路径和即将进入的路由的路径是否相同
if (from.path !== '/' && from.matched[0].path !== to.matched[0].path) {
message.destroy()
}
next()
})Reaccionar
/src/components/BeforeEach.jsx
import React from 'react'
import { Navigate } from 'react-router-dom'
import { routes } from '../../router';
export default function BeforeEach(props) {
if(true){
return <Navigate to="/login" />
}
else{
return (
<div>{ props.children }</div>
)
}
}export const routes = [
{
path: '/',
element: <BeforeEach><App /></BeforeEach>//包裹根组件APP
}
]Enrutamiento parcial (en comparación con el enrutamiento de componentes, se recomienda enrutamiento parcial, mejor bloque lógico)
const routes = [
{
name: 'bar',
component: Bar,
beforeEnter(to, from, next){
if(to.meta.auth){
next('/');
}
else{
next();
}
}
}
];enrutamiento de componentes
<script>
export default {
name: 'FooView',
beforeRouteEnter(to, from, next){
if(to.meta.auth){
next('/');
}
else{
next();
}
}
}
</script>El navegador ingresa la URL para mostrar el componente correspondiente de la ruta
Si no hay marcador de posición, el valor predeterminado es toda la página
Marcador de posición de Vue vista de enrutador\enlace de enrutador
<template>
<div>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>Reaccionar marcador de posición Outlet\Link
import React from "react";
import { Outlet, Link } from 'react-router-dom'
function App() {
return (
<div className="App">
<h2>hello react</h2>
<Link to="/">首页</Link> | <Link to="/about">关于</Link>
<Outlet />
</div>
);
}
export default App;Enrutamiento declarativo con estilo NavLink
Repetición de navegación (modificar los métodos push y replace del prototipo)
push: Agrega la nueva ruta al historial del navegador, para que el usuario pueda regresar a la ruta anterior a través del botón Atrás del navegador.
esto.$router.push('/sobre')
replace: no deja una nueva entrada en el historial del navegador, sino que reemplaza directamente la entrada del historial actual.
this.$router.replace('/contacto')
Por ejemplo, al procesar la página de inicio de sesión, la ruta actual puede
replacereemplazarse con un método después de un inicio de sesión exitoso para evitar que el usuario regrese a la página de inicio de sesión a través del botón Atrás.
Modificar el método prototipo de VueRouter pushy replacecapturar y procesar errores de repetición de navegación,
En lugar de arrojar errores en la consola , evita mensajes de error innecesarios y posibles problemas.
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => {
if (err.name !== 'NavigationDuplicated') {
throw err;
}
});
};
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => {
if (err.name !== 'NavigationDuplicated') {
throw err;
}
});
};
const router = new VueRouter({
// 路由配置...
});
export default router;