浅析Vue3(vue3笔记之进阶篇)

本文是结合实践中和学习技术文章总结出来的笔记(个人使用),如有雷同纯属正常((✿◠‿◠))

喜欢的话点个赞,谢谢! 有问题欢迎指正!!

前面已经讲了基本的Vue生命周期和入门知识,本篇重点介绍Vue3的一些进阶知识

1. vue-router路由

Vue的路由对比React真是舒服太多了,路由守卫不需要自己配置,还可以方便自己添加一些自定义逻辑,比如在

beforeEach加载进度条之类的,这里以Hash路由为例:

安装vue-router

yarn add vue-router

配置router.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import store from '@/store'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

const router = createRouter({
    history: createWebHashHistory(), // 路由模式
    routes: [
        {
            path: '/',
            name: 'layout',
            component: () => import('../layout/index.vue'),
            children: [
                {
                    path: '/',
                    name: 'home',
                    component: () => import('../views/home/index.vue')
                },
                //省略更多
                ....
            ]
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('../views/login/index.vue')
        },
        {
            path: '/user',
            name: 'user',
            component: () => import('../views/login/user.vue')
        },
        {
            path: '/404',
            name: '404',
            component: () => import('../views/error/404.vue')
        }
    ] // 路由规则
})

export default router

在main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import 'ant-design-vue/dist/reset.css'
import Antd from 'ant-design-vue'
import * as antdIcons from '@ant-design/icons-vue'
import store from './store'
import pinia from './store/pinia'

// 创建对象
const app = createApp(App)
Object.keys(antdIcons).forEach((key: any) => {
    app.component(key, antdIcons[key as keyof typeof antdIcons])
})

app.config.globalProperties.$antdIcons = antdIcons

app.use(router)
    .use(Antd)
    .use(store)
    .use(pinia)
    .mount('#app')

在App.vue中使用

路由守卫校验

router.beforeEach((to, _from) => {
    nprogress.start() // 开始加载进度条
    // 用户登录失效
    if (to.meta.requiresAuth && !store.state.login.UserInfo.name) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，则重定向到登录页面
        return {
            path: '/login',
            // 保存我们所在的位置，以便以后再来
            query: { redirect: to.fullPath }
        }
    }
    // 如果页面不存在
    if (!to.name && to.path !== '/404') {
        return {
            path: '/404'
        }
    }
})
// 结束加载进度条
router.afterEach(() => {
    nprogress.done() // 加载进度条
})

在beforeEach中我们可以处理登录校验和页面重定向等逻辑,非常方便,在afterEach里可以处理路由加载后的一些逻辑,比如进度条结束

2. 插槽

Vue实现了一套内容分发的api,将元素作为内容分发的出口,使用插槽可以让组件设计变得更加灵活

2.1. 基本使用