Configuración TS Route ###
Instalación ①: NPM i-Vue enrutador -S
②src bajo las nuevas páginas / Home.vue (también Goods.vue, Detail.vue y otras páginas):
< Plantilla > < div clase = "casa" > < h2 >首页</ h2 > </ div > </ plantilla > < script de lang = "TS" > importación de Vue ' vue ' ; {} la importación de componentes del " vue-propiedad-decorador " ; @Component ({}) de exportación por defecto la clase principal se amplía Vue { } </ script de >
③src bajo el plugins nuevo / router.ts :( nota Reg.vue y Detail.vue se basan en importación y requieren medios para lograr el enrutamiento carga diferida)
importación de Vue "vue" ; VueRouter importación de "vue-enrutador" ; Vue.use (VueRouter); // 安装插件 importación de Inicio "../pages/Home.vue" ; Las mercancías de importación de "../pages/Goods.vue" ; La importación de usuarios de "../pages/User.vue" ; importar el login de la "../pages/Login.vue" ; importar nopage de "../pages/NoPage.vue" ; deje rutas = [ {ruta: "/ home" , componente: Inicio}, {ruta:, componente: Productos}, {ruta: "/ usuario" , componente: Usuario}, {ruta: "/ login" , componente: Iniciar sesión}, {ruta: "/ reg", componente: () => importación (". ./pages/Reg.vue" )}, {ruta: "/detail",component:(resolve:any)=>{require(["../pages/Detail.vue" ], resolver)}}, { ruta: "*" , componente: nopage}, {ruta: "/", redirección: "/ home" }, ]; dejar que el router = nueva VueRouter ({ modo: "la historia" , exportar por defecto del router;
④main.js enrutador introducido e inscripciones:
enrutador de importación "./plugins/router" nueva Vue ({ render: h => h (APP), el router .}) $ montaje ( '#app')
ruta ⑤App.vue abrió un espacio:
< Enrutador-view > </ enrutador-view >
### guardias de ruta
router.ts 中:
/ * Guardia global * / router.beforeEach ((a, desde, Siguiente) => { el console.log ( "Global guardia frente" ) siguiente (); }) router.afterEach ((a, a partir de) => { consola .log ( "oponerse a retaguardia global" ) }) // enrutamiento guardia exclusiva {ruta: "/ usuario", componente: el usuario, beforeEnter: (a: la ruta, a partir de: la ruta, continuación: Función) => { consola. log ( "encaminamiento exclusiva protección frontal" ) siguiente (); }},
Nota: Al configurar la ruta exclusiva guardia, Ruta define el tipo de introducción automática de ts (VueRouter importación, {} Ruta del "vue-enrutador";)
Tenga en cuenta que los componentes internos de la Ruta :( tipo de protección se introduce manualmente)
(1) User.vue en:
{} De la Ruta de importación "VUE-Router" ;
@Component ({
/ *
la instrucción personalizada Aquí escritura, filtro, función de enlace guardia
* /
beforeRouteEnter (a: la Ruta, a partir de: la Ruta, Siguiente: Función) {
// ya que la escritura en el decorador, la función de enganche puede inferir automáticamente a, desde, el tipo de al lado, se pueden agregar sin tipos pueden
console.log ( "la protección delantera de montaje" )
próximos ();
}
})
(2) Reg.vue de:
{} la importación Ruta del "vue-enrutador" ;
@Component ({
beforeRouteLeave (a: Ruta, a partir de: Ruta, a continuación: Función) {
console.log ( "组件内后置守卫" )
siguiente ();
}
})
### -axios de intercambio de datos
Instalación: NPM i axios @ tipos / axios -S
Nota: No todos los plug-ins con la declaración de tipo de archivo, sólo la declaración de tipo de archivos con el fin de garantizar cios de apoyo, no hay archivos de declaración de tipo de documento de declaración de tipo es necesario instalar plug-ins.
(1) AXIOS uso inicial:
①public los nuevos datos / user.json:
{ "Datos" : [ { "nombre de usuario": "WXM" } ] }
②Home.vue en:
Axios de importación "Axios" ; exportación por defecto la clase principal se extiende el Vue { Montada (): void { axios ({ URL: "/data/user.json" // datos tenga acceso directo pública }) entonces (. RES => la console.log (res.data) ) } }
acceso de datos (2) JSON-servidor:
Necesidad de primer servicio de datos abierta JSON-servidor, a continuación, establecer la url: URL: "http: // localhost: 3000 / datos"
(3) acceso a datos tiantian-api:
① abierta tiantian-api Servicios de datos: inicio NPM plazo
② configurar proxy-dominios (Nueva vue.config.js el directorio raíz):
module.exports = { devserver: { Proxy: { "/ v3" : { objetivo: "http: // localhost: 3000" , changeOrigin: verdadera } } } }
③ dirección proxy para sustituir la dirección original:
url: "/ v3 / página de inicio"
(4) interceptor axios:
Nueva axios.ts bajo ①plugins:
axios importación, {AxiosRequestConfig, AxiosResponse} de "axios" ;
enrutador de importación './router' ;
{} la importación TUSER de '@' / tipos ;
// 请求拦截器
axios.interceptors.request.use ((config: AxiosRequestConfig): AxiosRequestConfig => {
/ *
抓取modo,到响应头携带
显示carga
* /
permitir al usuario: TUSER = window.localStorage.getItem ( "usuario " );
user = user JSON.parse (usuario):?"" ;
config.headers = {? token: usuario .token} //Llevar el encabezado de solicitud
de retorno config;
}, (error) => {
retorno Promise.reject (error)
})
// bloqueador de respuesta
axios.interceptors.response.use ((respuesta: AxiosResponse <cualquier >): AxiosResponse <any> => {
/ *
señal caduca, entrada salto, dejar la dirección de la corriente
de carga
* /
// determina si hay un error (de caducidad token), y la ruta actual no es de inicio de sesión, y luego saltar a la página de inicio de sesión y la ruta completa de la banda actual Durante la última
SI (response.data.err == 2 && router.currentRoute.fullPath.includes ( "/ la sesión"! )) {
router.push ({ruta: "/ el inicio de sesión" , Pregunta: {ruta: router.currentRoute.ruta completa}});
}
Respuesta;
}, (error) => {
retorno Promise.reject (error)
}) // La exposición externa
de exportación por defecto Axios; regreso
Axios utiliza para reemplazar el paquete original cuando se utilizan axios ②Home.vue:
importar axios de "../plugins/axios";
(5) Los axios montaje de la ventana:
①src / types / index.ts 中:
// definir variables globales, redefinió interfaz de ventana DECLARE {Global ventana de la interfaz { Axios (config: AxiosRequestConfig): AxiosPromise <ANY> } }
②axios interceptor del tiempo de exposición externa para añadir:
window.axios = axios;
③main.js introducido:
"importación" ./plugins/axios
④Home.vue sin introducir ningún axios en uso, () utilizando directamente window.axios:
montada (): void { window.axios ({ url: "/ v3 / página de inicio" }). entonces ( res => console.log (res.data) ) }
### lógica de validación de inicio de sesión
①axios.ts bloqueador de respuesta utilizado router.currentRoute.fullPath destinado puede obtener la ruta actual, para retener la dirección actual:
// determinar si hay un error (token expirado), y la ruta actual no es de inicio de sesión, y luego saltar a la página de inicio de sesión y la ruta completa actual con el pasado SI (response.data.err == 2 &&! Router.currentRoute.fullPath. incluye ( "/ login" )) { router.push ({ruta: "/ login" , Pregunta: {ruta: router.currentRoute.fullPath}}); }
solicitud ②Login.vue cuando inicio de sesión, si no hay error, el depósito de contadores a localStorage, y saltar a la interceptor respuesta de enrutamiento de retenido:
< Botón @Haga clic = "login" >登录</ botón >
exportación por defecto la clase de sesión se extiende Vue { inicio de sesión pública (): void { window.axios ({ url: "/ api / login" , método: "post" , los datos: {nombre de usuario: "Chenghao", contraseña: "chenghao123" } } ) .then ( res => { si (res.data.err == 0 ) { // 种contador到localStorage中 window.localStorage.setItem ( "usuario", JSON.stringify (res.data)) // antes del salto a la página de la presente . $ Router.replace ( el este . $ Route.query.path Cadena) } } ) } }
Gestión del Estado ###
Instalación ①: NPM i vuex vuex clase -S
Continuará ......