Tabla de contenido
1. Enrutamiento desde la creación hasta el uso
1. Usar enrutamiento en archivos html
Paso 1: use CDN para introducir el complemento vue-router
Paso 3: crear una matriz de objetos de ruta
Paso 4: Cree un objeto de instancia de enrutador
Paso 5: Inyecte el objeto del enrutador en la instancia de vue
2. Usar enrutamiento en vue-cli
1. Enrutamiento desde la creación hasta el uso
El enrutamiento puede verse como otra forma de cargar componentes, utilizando el enrutamiento para lograr saltos entre componentes.
Vue-router es un complemento para Vue que proporciona funcionalidad de enrutamiento. Los componentes se pueden cargar dinámicamente a través de cambios de enrutamiento para lograr el propósito de desarrollar programas de una sola página.
1. Usar enrutamiento en archivos html
Paso 1: use CDN para introducir el complemento vue-router
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js" integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Paso dos: Definir componentes
let aticle={
template:`
<div>文章页面</div>
`
};
let column={
template:`
<div>栏目页面</div>
`
};Paso 3: crear una matriz de objetos de ruta
ruta objeto de enrutamiento enrutador objeto de enrutador rutas matriz de objetos de enrutamiento
let routes=[
{
path: '/',
// 路由重定向 设置刚进入页面时展示哪个页面
redirect: '/article'
},
{
//路径
path:'/article',
//路由路径跳转的组件
component:aticle
// 路由命名
name:'Article',
// 路由别名
alias:'/aa'
},
{
path:'/column',
component:column
}
];Paso 4: Cree un objeto de instancia de enrutador
Cree un objeto de instancia de enrutador e inyecte la matriz de objetos de enrutamiento en el objeto de enrutador
let router = new VueRouter({
//routes: routes
//可以简写成：
routes
});Paso 5: Inyecte el objeto del enrutador en la instancia de vue
new Vue({
router
});Paso 6: Usar enrutamiento
a indica la ruta a seguir
<router-link to="/article">去文章管理</router-link>
<router-link to="/column">去栏目管理</router-link>Es necesario proporcionar una salida de enrutamiento para que coincida con los componentes correspondientes a la ruta de enrutamiento
<router-view></router-view>ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.5.4/vue-router.min.js"
integrity="sha512-zxWuRslhjyZyRAYInXTNl4vC/vBBwLQuodFnPmvYAEvlv9XCCfi1R3KqBCsT6f9rk56OetG/7KS9dOfINL1KCQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="app">
<!-- 4.使用路由 to表示要去的路由-->
<router-link to="/article">去文章管理</router-link>
<router-link to="/column">去栏目管理</router-link>
<!-- 路由出口 匹配路由路径对应的组件 -->
<router-view></router-view>
</div>
<script>
let article = {
template: `
<div>文章页面</div>
`
};
let column = {
template: `
<div>栏目页面</div>
`
};
// 1.配置路由对象数组
let routes = [
{
path: '/',
// 路由重定向 设置刚进入页面时展示哪个页面
redirect: '/article'
},
{
path: '/article',
component: article
},
{
path: '/column',
component: column
}
];
// 2.创建路由器对象router
let router = new VueRouter({
routes
});
// 3.将路由器对象注入到vue实例中
new Vue({
router,
el: "#app",
data: {
}
})
</script>
</body>
</html>
2. Usar enrutamiento en vue-cli
Instalar vuecli
npm install -g @vue/clicrear un proyecto
vue create 项目名称1. Utilice las teclas arriba y abajo para seleccionar el último elemento (indica la función de selección manual) y presione Entrar:
2. Presionamos la barra espaciadora para seleccionar o deseleccionar, elegimos las siguientes dos opciones:
3. Seleccione la versión vue2
4. ¿El enrutador usa el modo de historial? Ingrese y o presione Entrar directamente
5. ¿Dónde desea colocar los elementos de configuración? Seleccionar en paquete.json
6. ¿Se guarda como preajuste para futuros proyectos? Solo ingresa directamente
7. Espere a que se cree el proyecto. . .
8. Iniciar el proyecto
uso de enrutamiento
La configuración relacionada con el enrutamiento está en src-->router-->index.js, podemos escribir nuestros componentes en componentes o vistas, o crear una carpeta para almacenar componentes.
El uso de enrutamiento en vue-cli es el mismo que los pasos de uso en el archivo html:
Ejemplo:
cree dos componentes en componentes: A.vue y B.vue
A.vue
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:"我是A组件"
}
}
}
</script>B.vue
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:"我是B组件"
}
}
}
</script> Luego vamos a index.js debajo del enrutador para configurar el enrutamiento:
Finalmente usamos enrutamiento en App.vue:
Observe la barra de direcciones, cuando hacemos clic en la página para saltar, solo cambia la última dirección, pero el anterior localhost: 8080 permanece sin cambios, esta es una aplicación de una sola página.