Vue-day09

路由懒加载（延迟加载）

懒加载导入的方式处理，每个组件都会单独生成一个js文件，当你实际访问哪个路由，那这个路由对应的组件文件才会加载，否则不加载。

var Index=()=>import("../views/Index.vue")

路由守卫

全局前置路由守卫

控制路由的跳转

    rouret.beforeEach((to, from, next) => {
        //to将要去的路由对象
        //from来自哪的路由对象
        var accrssRoutes = ['/index/gwc', '/index/mine']//将要去的地址
        if (accessRouters.include(to.path)) {
            //判断当前路由是否包含accessrouter中的某一个
            if (token) {//判断用户是否携带token
                next();//如果有的话允许访问
            } else {
                next('/login');//如果未携带强制跳转到登录页面
            }
        } else {//访问其他路由允许访问
            next()
        }
        next()
    })

后置路由守卫

    rouret.afterEach((to, from) => {

    })

进度条

下载

npm i nprogress

//导入进度条插件
import nProgress from 'nprogress'
//导入进度条样式
import "nprogress/nprogress.css"
    touret.boforeEach((to, from) => {
    })
    touret.afterEach((to, from) => {
        nprogress.done();//停止播放进度条动画
    })

组件库

移动端组件库

vant UI

官网：https://vant-contrib.gitee.io/vant/#/zh-CN

下载

npm i vant

安装插件

npm i unplugin-vue-components -D

配置插件

在vite.config.js目录

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

下载好要重启

PC端组件库

vue2 element UI

vue3 element plus

网络请求

axios

基于promise的http请求工具库，支持浏览器端和nodejs端

发送请求

get

axios.get('地址'，{params:{}})

post

axios.post('地址'，{})

设置拦截器

请求拦截器

service.intercepters.request.use()

响应拦截器

service.intercepters.response.use()

管理请求

一个接口封装成一个函数，并导出

//导入设置过拦截器的axios实例对象
import service from '../utils/request'
//一个接口封装成一个函数
//查看快捷分类
export function index_catelist(paylode={}){ 
return service.get('/api/index/catelist',{params:paylode});
}

在组件中导入函数，并调用

导入函数

//命名导入（按需导入）
import{ index_catelist,banner_list,user_login} from'./api' 
//集体导入到一个对象中
import * as service from './api'

调用函数

//查看快捷分类
service.index_catelist（）.then((res)=>{
console.log(res.data);
})