1. Concepto
1. Qué es el enrutamiento
En pocas palabras, el enrutamiento es la asignación de URL a función. La
URL visitada se asignará a la función correspondiente, y la función correspondiente decidirá qué devolver a esta URL. El
enrutamiento es un trabajo coincidente .
2. Enrutamiento back-end y enrutamiento front-end
-
1. Enrutamiento back-end:
para los sitios web normales, todos los hipervínculos son direcciones URL. Todas las direcciones URL corresponden a los recursos correspondientes en el servidor.
Cada recurso front-end corresponde a una dirección URL. El enrutamiento back-end distribuye el
navegador en la barra de direcciones. cada vez que al cambiar diferentes url petición al servidor de servicios de fondo y responde el servidor a la solicitud pasa al archivo html mosaico de pantalla frontal en el fondo para devolver diferentes páginas
que significa que el navegador se actualice la página final no se separa antes y después -
2, el extremo delantero de la ruta:
Para una sola página aplicación a través de la dirección URL de la almohadilla (#
logrado No.) de conmutación entre las diferentes páginas de la página no se actualiza
ejemplo:www.xxx.com#/xxx
este formato
al mismo tiempo tiene un hash característica: la solicitud HTTP no contiene el hash relevante El contenido es
similar al concepto de un punto de anclaje . El
navegador interpretará los caracteres que aparezcan después del primer # como un identificador de ubicación. Esto significa que estos caracteres no se enviarán al
enrutamiento frontal del lado del servidor . Simplemente cambie el contenido después del # Sólo se destinará a la posición correspondiente no se recargue la web navegador solicita una página del servidor no es re
En una aplicación de una sola página, esta forma de cambiar las páginas a través de cambios hash se denomina enrutamiento front-end
(lo que constituye una diferencia del enrutamiento back-end. El front-end es responsable del enrutamiento)
En segundo lugar, el uso básico
1. Introducción
vue-router es el administrador de enrutamiento oficial de Vue.js
Introducción al cdn:
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
vue-router depende de Vue, por lo que el orden de introducción de vue-router debe ser posterior a Vue
Cuando se importa el paquete vue-router, usará automáticamente la
dirección URL de enrutamiento de Hash y se agregará automáticamente después de:#/
2. Cree un objeto de regla de enrutamiento para definir las reglas de coincidencia de enrutamiento:
Cuando se importa el paquete vue-router, hay un constructor de ruta llamado VueRouter en el objeto global de la ventana
① new VueRouter()
Cree un objeto de regla de enrutamiento y pase un objeto de configuración para el constructor cuando sea nuevo
objeto de configuración que está adaptada reglas de enrutamiento para cada ruta es una regla de concordancia objeto
Hay dos obligatorias en el objeto atributos :
path
es decir, las conexiones de enrutamiento de escucha no component
es decir que se mostrará componentes correspondientes
Ejemplo:{path:"/login",component:login}
②, y luego registre el objeto de regla de enrutamiento en el atributo de enrutador de la instancia de Vue
De esta manera, después de hacer coincidir la conexión de enrutamiento anterior, los componentes correspondientes en la parte posterior se muestran en la página para lograr el enrutamiento
<script>
// 组件模板对象1
var login={
template:"<h1>登录</h1>"
}
// 组件模板对象2
var register={
template:"<h1>注册</h1>"
}
// 创建路由规则对象
var routerObj=new VueRouter({
// 定义路由匹配规则
routes:[
// component属性的值是模板对象 不是组件引用名称 不加引号
{path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm=new Vue({
el:'#app',
data:{},
methods:{},
// 将路由规则对象注册到Vue实例上 监听URL地址的变化然后根据规则展示对应的组件
router:routerObj
});
</script>
3. Use el <router-view>
marcador de posición de la etiqueta para mostrar el componente que coincide con la regla de enrutamiento en la etiqueta:
vue-router proporciona un <router-view>
elemento para marcadores de posición
. Los componentes que coincidan con las reglas de enrutamiento se mostrarán en la etiqueta
<div id="app">
<!-- 跳转的地址前面必须加上井号[#] 因为跳转到的并不是真实页面 而是锚点路由 -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 路由规则匹配到的组件会展示到该标签上 -->
<router-view></router-view>
</div>
Proceso de implementación:
hipervínculo y luego el usuario hace clic en la dirección URL de la página serán modificados
debido al objeto de ruta está Después de modificar la dirección URL será encaminado automáticamente a Vue en la instancia de inscripción escuchas a la dirección URL cambia direcciones inmediatamente enrutados coinciden
si partido Según la regla correspondiente, el componente correspondiente se muestra en el <router-view>
marcador de posición de la página
Tercero, <router-link>
configure el enlace de enrutamiento
Vue ofrece <router-link>
ellas el uso de etiquetas de atributo para especificar la ruta de la dirección de conexión
<router-link>
de etiquetas en la página por defecto representa como una etiqueta
Ejemplo:
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
Es igual a:
<a href="#/login">登录</a>
<a href="#/register">注册</a>
Puede usar el atributo de etiqueta para especificar la etiqueta que se representará:
<router-link to="/login" tag="span">登录</router-link>
Cuatro, enrutamiento de redireccionamiento
Monitor [ /
] La ruta raíz muestra el componente especificado tan pronto como ingresa a la página
var routerObj=new VueRouter({
// 定义路由匹配规则
routes:[
{path:"/",component:login},
{path:"/login",component:login},
{path:"/register",component:register}
]
})
Aunque este método se puede implementar, el anclaje de ruta que se muestra al ingresar a la página por primera vez sigue siendo la ruta raíz.
En este momento, la redirección real se puede lograr especificando la ruta de redireccionamiento :{path:"/",redirect:"/login"}
var routerObj=new VueRouter({
// 定义路由匹配规则
routes:[
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
})
Cabe señalar que la redirección aquí es diferente de la redirección en el lado del servidor. La redirección aquí es que el cliente modifica el valor hash para modificar la dirección de salto
Cinco, efecto de resaltado
Cuando la ruta de destino se activa correctamente, el elemento de enlace establecerá automáticamente un nombre de clase CSS que indica activación. Esta clase
estará presente en el componente cargado actualmente.router-link-active
Luego, siempre que agregue estilos a esta clase, puede lograr el efecto de resaltado:
<style>
.router-link-active
{
color: aqua;
font-size: 40px;
}
</style>
El nombre de la clase también se puede especificar por sí mismo en las opciones de construcción de ruta linkActiveClass
:
<script>
var routerObj=new VueRouter({
routes:[
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
],
// 自定义激活的类名
linkActiveClass:"myactiveclass"
})
</script>
<style>
.myactiveclass
{
color: aqua;
font-size: 40px;
}
</style>
Sexto, transmisión de parámetros
El paso de parámetros es obtener los parámetros transportados en la URL solicitada en el componente de enrutamiento
Hay dos formas de pasar parámetros:
consulta y parámetros
1. método de consulta
Se utiliza $route
para obtener un atributo de consulta en el objeto de enrutamiento actual. El
atributo de consulta contiene todos los parámetros de consulta que contiene.
<router-link to="/login?id=1">登录</router-link>
<script>
var login={
template:"<h1>登录</h1>",
created()
{
console.log(this.$route);
}
}
</script>
Entonces uso $route.query.属性名
se pueden obtener
pueden pasar varios parámetros:
<router-link to="/login?id=1&name=陈涛">登录</router-link>
<script>
var login={
// 用 $route.query.属性名 来获取参数
template:"<h1>登录 - {{$route.query.id}} - {{$route.query.name}}</h1>",
created()
{
console.log(this.$route);
}
}
</script>
2. Parámetros
$route
Existe uno de los objetos de enrutamiento actuales obtenidos utilizando params属性
los parámetros de consulta que se llevan dentro.
Vue-router analiza internamente la ruta (ruta de solicitud) en una expresión regular y luego analiza la expresión regular en fullPath.
Cuando se solicita de esta manera, se superpone con barras :
<router-link to="/login/1">登录</router-link>
<script>
var login={
template:"<h1>登录</h1>",
created()
{
// 组件的生命周期函数
console.log(this.$route);
}
}
</script>
params propiedad donde hay parámetros de entrada:
por $route.params.属性名
la adquisición
pueden pasar varios parámetros:
<router-link to="/login/1/陈涛">登录</router-link>
<script>
var login={
template:"<h1>登录 - {{$route.params.id}} - {{$route.params.name}}</h1>",
created()
{
console.log(this.$route);
}
}
</script>