Notas de estudio de Vue: tres: enrutamiento de front-end de Vue

Enrutamiento de front-end de Vue

enrutamiento

Enrutamiento de backend

• Concepto: de acuerdo con las diferentes solicitudes de URL de los usuarios, se devuelve contenido diferente
• Esencia: la correspondencia entre la dirección de solicitud de URL y los recursos del servidor.

SPA （Aplicación de una sola página）

• Representación de back-end (con problemas de rendimiento)
• Renderizado de front-end Ajax (el renderizado de front-end mejora el rendimiento, pero no es compatible con las operaciones de avance y retroceso del navegador)
• Aplicación de una sola página SPA (aplicación de página única), todo el sitio web tiene una sola página, los cambios internos se realizan a través de la actualización parcial de Ajax y admite las operaciones de avance y retroceso de la barra de direcciones del navegador
• Uno de los principios de la implementación de SPA: hash basado en la dirección URL (los cambios en el hash harán que el navegador registre los cambios en el historial de acceso, pero los cambios en el hash no activarán nuevas solicitudes de URL)
• En el proceso de implementación de SPA, el punto técnico central es el enrutamiento de front-end

Enrutamiento de front-end

• Concepto: de acuerdo con los diferentes eventos del usuario, muestre diferentes contenidos de la página
• Esencia: la correspondencia entre los eventos del usuario y las funciones de manejo de eventos.

Implemente un enrutamiento de front-end simple

• Implementación basada en el hash en la URL (cambiar el hash de la URL cuando se hace clic en el menú y controlar el cambio de los componentes según el cambio del hash

//监听window的 onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
window.onhashchange = function(){
	//通过location.hash获取到最新的hash值
}

Vista de enrutador

Sitio web oficial: https://router.vuejs.org/zh/

Es el administrador de rutas oficial de Vue.js.

Está profundamente integrado con el núcleo de Vue.js y se puede usar para el desarrollo de aplicaciones SPA de manera muy conveniente.

Las funciones incluidas en Vue Router son:

• Admite la plantilla de historial HTML5 o el modo hash
• Admite enrutamiento anidado
• Admite parámetros de enrutamiento
• Apoyar el enrutamiento programático
• Soporte de enrutamiento con nombre

Avanzado

Guardia de navegación

Efecto de transición

recopilación de datos

Ruta de carga diferida

Pasos básicos

1. Introducir archivos de biblioteca relacionados

   1. Importar archivo de biblioteca vue
   2. Importar el archivo de biblioteca vue-router

2. Agregar enlace de enrutamiento

   1. Agregue el enlace del enrutador. Es la etiqueta proporcionada en vue, la representación predeterminada es la etiqueta a
      • El atributo to se representa como href de forma predeterminada
      • <router-link to="/login" tag="button">登陆</router-link>

3. Agregar relleno de enrutamiento

   1. Agregar vista de enrutador. En el futuro, los componentes que coincidan con las reglas de enrutamiento se representarán en la ubicación de la vista del enrutador

4. Definir componentes de enrutamiento

   var User = {
   	template: '<div>User</div>'
   }
   

5. Configurar reglas de enrutamiento y crear instancias de enrutamiento

   //创建路由实例对象
   var router = new Router({
   	// routes 是路由规则数组
   	routes: [
   		// 每个路由规则都是一个配置对象，至少包含 path和component两个属性：
   		// path 表示当前路由规则匹配的hash地址
   		// component表示当前路由对应要展示的组件
   		{path: '/user', component: User}
   		{path: 'register', component: register},
   	]
   })
   

6. Monte la ruta a la instancia raíz de Vue

   new Vue({
   	el: '#app',
   	// 为了能够路由规则生效，必须把路由对象挂载到vue实例对象上
   	router
   });
   

Redirección de ruta

La redirección de enrutamiento se refiere a: cuando un usuario visita la dirección A, se muestra una página de componente específico

A través del atributo de redireccionamiento de la regla de enrutamiento, especifique una nueva dirección de enrutamiento, puede configurar fácilmente el redireccionamiento de la ruta.

var router = new VuewRouter({
	routes: [
		//其中。path表示需要被重定向的原地址，redirect表示将要被重定向的新地址
		{path: '/', redirect: '/user'},
		{path: '/user', component: User},
	]
})

Enrutamiento anidado

Análisis de la función de enrutamiento anidado

• Haga clic en el enlace de la ruta principal para mostrar el contenido de la plantilla
• Hay enlaces de enrutamiento para niños en el contenido de la plantilla
• Haga clic en el enlace de enrutamiento secundario para mostrar el contenido de la plantilla secundaria

Enlace del componente de enrutamiento principal

• Enlace de ruta principal
• Relleno de enrutamiento del componente principal

<p>
	<router-link to='/user'>User</router-link>
</p>
<div>
	<!--控制组件的显示位置-->
	<router-view></router-view>
</div>

Plantilla de enrutamiento para niños

• Enlace de enrutamiento secundario
• Acolchado de enrutamiento para niños

const Register = {
	template: `<div>
		<h1> Register 组件 </h1>
		<hr/>
		<router-link to="/register/tab1">tab1</router-link>
		<router-link to="/register/tab2">tab2</router-link>
		
		<!--- 子路由填充位置 -->
		<router-view/>
	</div>`		
}

Enrutamiento anidado

• La ruta principal configura la ruta secundaria a través del atributo secundario

const router = new Router({
	routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      //通过children 属性，为/index 添加子路由
      children: [
        {path: 'register', component: register},
        {path: 'login', component: login},
      ]
    },
})

Uso básico de la coincidencia de rutas dinámicas

Escenario de aplicación: coincidencia de rutas a través del patrón de parámetros de enrutamiento dinámico

var router = new VueRouter({
	routes: [
		//动态路径参数，以冒号开头
		{path: '/user/:id', component: User}
	]
})

const User = {
	//路由组件中通过$route.params 获取路由参数
	template: '<div>User {
   
   { $route.params.id }}</div>'
}

Los componentes de enrutamiento pasan parámetros

$ route está muy acoplado con la ruta correspondiente y no es lo suficientemente flexible, por lo que puede usar accesorios para desacoplar componentes y rutas

1. El valor de los accesorios es booleano.

const router = new Router({
	routes: [
		//如果props 被设置为 true， route.params 将会被设置为组件属性
		{path: '/user/:id', component: User, props: true }
	]
})
const User = {
	props: ['id'],  // 使用props 接收路由参数
	template: `<div> 用户信息： {
   
   { id }} </div> `  //使用路由参数
}

2. El valor de los accesorios es el tipo de objeto.

const router = new VueRoter((
	routes: [
		//如果props是一个对象，它会被按原样设置为组件属性
		{path: '/user/:id', component: User, props: { uname: 'lili', age: 18}}
	]
))

const User = {
	props: ['uname', 'age'],
	template: `<div> 用户信息： {
   
   { uname + '-----' +age}} </div> `
}