Vue Series Twelve: Comience rápidamente en el combate real

Adoptamos el modo de enseñanza práctica y combinamos la biblioteca de componentes ElementUI para aplicar los puntos de conocimiento requeridos a la práctica, y lo llevamos a dominar el uso de Vue lo más rápido posible;

12.1 Crear un proyecto

Nota: La línea de comando debe ejecutarse en modo administrador
1. Cree un proyecto llamado hello-vue vue init webpack hello-vue
2. Para instalar dependencias, necesitamos instalar cuatro complementos, vue-router, element-ui, sass-loader y node-sass

#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

3. Explicación del comando Npm:

• npm install moduleName: Instale el módulo en el directorio del proyecto
• npm install -g moduleName:-g significa instalar el módulo en el global, la ubicación específica de la instalación en el disco depende de la ubicación del prefijo de configuración npm
• npm install -save moduleName:--save significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo de dependencias del archivo del paquete, -S es la abreviatura de este comando
• npm install -save-dev moduleName:--save-dev significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo devDependencies del archivo del paquete, -D es la abreviatura de este comando

12.2 Crear una página de inicio de sesión

¡Elimine cosas de inicialización inútiles!
  Cree la siguiente estructura en el directorio de origen:

• activos: se utiliza para almacenar archivos de recursos
• componentes: se utiliza para almacenar componentes funcionales de Vue
• vistas: se utiliza para almacenar componentes de vista de Vue
• enrutador: se utiliza para almacenar la configuración de vue-router

Para crear la vista de la página de inicio, cree un componente de vista llamado Main.vue en el directorio de vistas:

<template>
	<div>首页</div>
</template>
<script>
	export default {
			name:"Main"
	}
</script>
<style scoped>
</style>

Crear una vista de página de inicio de sesión Cree un componente de vista llamado Login.vue en el directorio de vistas, donde los elementos de el-* son componentes ElementUI;

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onsubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            form:{
              username:'',
              password:''
            },
            //表单验证，需要在 el-form-item 元素中增加prop属性
            rules:{
              username:[
                {required:true,message:"账号不可为空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密码不可为空",tigger:"blur"}
              ]
            },

            //对话框显示和隐藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //为表单绑定验证功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，该方式称为编程式导航
                this.$router.push('/main');
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

Para crear una ruta, cree un index.jsarchivo de configuración de enrutamiento llamado vue-router en el directorio del enrutador

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main
    },
    //首页
    {
      path: '/login',
      component: Login
    },
  ]

})

APP.ver

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',

}
</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>

principal.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from "./router"

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})

Prueba: Abra http://localhost:8080/#/iniciar sesión en el navegador
Si hay un error: Puede ser un error de compilación causado por la versión alta de sass-loader. La versión más alta actual es 8.0.2, y usted necesita volver a 7.3.1;
Vaya a la versión "sass-loader" en el archivo package.json y reemplácelo con 7.3.1, y luego vuelva a instalarlo con cnpm;

12.3, anidamiento de enrutamiento

El enrutamiento anidado, también conocido como subenrutamiento, generalmente se compone de múltiples capas de componentes anidados en aplicaciones prácticas.
demostración
1. Cree un componente de información de usuario y cree un componente de vista llamado Profile.vue en el directorio views/user
;

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>

2. En el componente de la lista de usuarios, cree un componente de vista llamado List.vue en el directorio de vistas/usuario:
List.vue

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

3. Para modificar la vista de la página de inicio, modificamos el componente de vista Main.vue. Aquí se usa el componente de contenedor de diseño ElementUI. El código es el siguiente:
Main.vue

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在这里展示视图-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

4. Configure el enrutamiento anidado Modifique el archivo de configuración de enrutamiento index.js en el directorio del enrutador y use niños para colocarlo en el principal para escribir un submódulo.El código es el siguiente
index.js

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//导入子模块
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main,
      //  写入子模块
      children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
      ]
    },
    //首页
    {
      path: '/login',
      component: Login

    },
  ]
})

5. Enrutamiento anidando representaciones de combate reales

Representaciones anidadas de enrutamiento de gráficos

12.4, paso de parámetros

Aquí hay una demostración de cómo pasar la
demostración si la solicitud tiene parámetros. El
 código en el ejemplo anterior se usa para modificar algún código. El código repetido no se coloca aquí
. El primer método de valor
1. Modificar la configuración de enrutamiento, principalmente en el index.js debajo del enrutador Se agregaron marcadores de posición como: id al atributo de ruta

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile
}

2. Pasar parámetros
 En este momento, cambiamos a: a en la posición del enlace de la ruta en Main.vue, para usar este atributo como un objeto. Tenga en cuenta que el nombre del atributo name en el enlace del enrutador debe ser el mismo que el nombre en la ruta Los nombres de las propiedades coinciden, porque entonces Vue puede encontrar la ruta de enrutamiento correspondiente;

<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

3. Reciba los parámetros en el componente Profile.vue para que se muestren Use {undefined{$route.params.id}} para recibir la
parte Profile.vue del código

<template>
  <!--  所有的元素必须在根节点下-->
  <div>
    <h1>个人信息</h1>
    {
   
   {$route.params.id}}
  </div>
</template>

El segundo método de valor utiliza accesorios para reducir el acoplamiento
1. Modifique la configuración de enrutamiento, principalmente agregando el atributo props: true al atributo de enrutamiento en index.js en el enrutador

{
	path: '/user/profile/:id', 
	name:'UserProfile', 
	component: UserProfile, 
	props: true
}

2. Modifique la dirección de enlace de ruta en Main.vue como antes pasando parámetros

<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>

3. Reciba parámetros en Profile.vue para agregar propiedades de accesorios al componente de destino
Profile.vue

<template>
  <div>
    个人信息
    {
   
   { id }}
  </div>
</template>
<script>
    export default {
      props: ['id'],
      name: "UserProfile"
    }
</script>
<style scoped>
</style>

Representaciones de referencia de transmisión de imágenes

12.5, redirección de componentes

Todos entienden el significado de la redirección, pero la redirección en Vue funciona cuando la ruta es diferente pero los componentes son los mismos, por ejemplo:
la configuración de index.js en el enrutador

{
  path: '/main',
  name: 'Main',
  component: Main
},
{
  path: '/goHome',
  redirect: '/main'
}

Descripción: Aquí se definen dos rutas, una es /main y la otra es /goHome, donde /goHome redirige a la ruta /main, se puede ver que la redirección no necesita definir componentes;

Si lo usa, solo necesita configurar la ruta correspondiente en Main.vue;

<el-menu-item index="1-3">
    <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

12.6 Modo de enrutamiento y 404

Hay dos modos de enrutamiento

• hash: ruta con el símbolo #, como http://localhost/#/login
• historial: ruta sin el símbolo #, como http://localhost/login

Modifique la configuración de enrutamiento, el código es el siguiente:

export default new Router({
  mode: 'history',
  routes: [
  ]
});

404 demo
1. Cree un componente de vista
NotFound.vue NotFound.vue

<template>
    <div>
      <h1>404,你的页面走丢了</h1>
    </div>
</template>
<script>
    export default {
        name: "NotFound"
    }
</script>
<style scoped>
</style>

2. Modificar la configuración de enrutamiento index.js

import NotFound from '../views/NotFound'
{
   path: '*',
   component: NotFound
}

3. Representación
 

 

Representaciones de la figura 404

Ganchos de enrutamiento y solicitudes asíncronas

beforeRouteEnter: ejecutar antes de entrar en la ruta
beforeRouteLeave: ejecutar antes de salir de la ruta

Escribir en Profile.vue

  export default {
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("准备离开个人信息页");
      next();
    }
  }

Descripción del parámetro:
a: la información de la ruta a la que se saltará la ruta
from: la información de la ruta antes de la ruta jump
next: el parámetro de control de la ruta
next() salta a la página
siguiente next('/path') Cambia la dirección del salto de la ruta a realizar Salta a otra ruta
next(false) devuelve la página original
next((vm)=>{}) solo está disponible en beforeRouteEnter, vm es la instancia del componente

Uso de solicitudes asincrónicas en funciones de enlace

1. Instalar Axios

cnpm install --save vue-axios

• 1

2. Main.js hace referencia a Axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3. Preparar datos: solo se puede acceder a los archivos en nuestro directorio estático, por lo que colocamos los archivos estáticos en este directorio.
Los datos son los mismos que los datos json utilizados antes y deben ir al ejemplo de axios anterior

// 静态数据存放的位置
static/mock/data.json

4. Realice una solicitud asíncrona en beforeRouteEnter
Profile.vue

  export default {
    //第二种取值方式
    // props:['id'],
    name: "UserProfile",
    //钩子函数 过滤器
    beforeRouteEnter: (to, from, next) => {
      //加载数据
      console.log("进入路由之前")
      next(vm => {
        //进入路由之前执行getData方法
        vm.getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开路由之前")
      next();
    },
    //axios
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }

5. Diagrama de combinación de gancho de enrutamiento y axios