黑马程序员 Vue3 大事件项目补充(最新bug解决以及各种踩坑)

配置

补充知识点

1. 管理系统中, 路由部分, 关注一下路由配置以及路由守卫
2. 自己写一下动态路由
3. Vue3 的生命周期
4. setup 钩子函数
5. Pinia 持久化
6. 路由配置 history 和 hash 模式有什么区别?

布局组件 + 重定向理解
在Vue Router中，路由配置对象定义了应用程序中的路由规则。每个路由配置对象至少包含path和component属性，分别表示URL路径和对应的组件。在你提供的代码中，{ path: '/', component: () => import('@/views/layout/LayoutContainer.vue'), redirect: '/article/manage', ... } 这一部分配置有几个关键点：
7. path: '/'：这表示当用户访问根URL（例如http://yourdomain.com/）时，Vue Router会匹配这个路由。
8. component: () => import('@/views/layout/LayoutContainer.vue')：这指定了当路由匹配时应该渲染的组件。这里使用了动态导入（import()），它允许Vue Router按需加载组件，从而提高应用程序的加载性能。LayoutContainer.vue可能是一个布局容器组件，用于包裹其他页面组件，并提供通用的布局结构，比如头部、侧边栏等。
9. redirect: '/article/manage'：这表示当用户访问根路径'/'时，Vue Router会自动重定向到'/article/manage'路径。这意味着用户实际上看到的是ArticleManage.vue组件的内容，而不是LayoutContainer.vue。redirect属性告诉Vue Router在匹配到当前路由时执行一个重定向操作。
10. children：这是一个子路由数组，定义了在'/'路径下的嵌套路由。每个子路由都指定了自己的path和component。当用户访问这些子路径时，例如'/article/manage'或'/user/avatar'，Vue Router会根据这些配置渲染对应的组件，并且这些组件都会被LayoutContainer.vue包裹。
综上所述，当用户访问'/'路径时，Vue Router会执行以下操作：

• 首先，由于redirect: '/article/manage'的存在，用户会被重定向到'/article/manage'。
• 然后，因为'/article/manage'是一个子路由，Vue Router会渲染ArticleManage.vue组件。
• 同时，由于ArticleManage.vue是LayoutContainer.vue的子组件，所以ArticleManage.vue的内容会被LayoutContainer.vue包裹。
  这样设计的好处是，你可以为多个页面提供一个统一的布局，同时通过重定向保持URL的整洁和逻辑上的一致性。

配置总结

项目开始
① 新建几个重要的文件夹

1. utils (工具文件夹)
2. api ( 请求 相关)
3. stores ( 不同页面的通信 )
   
   ② 导入 element-ui 组件库 、 scss 等等
   ③ 配置持久化
   Pinia - 配置创库统一管理
   在 stores 新建立一个 index.js 文件 以及 moudles 文件夹
   在moudle 文件夹中例如有 counter.js
   store / modules / counter.js

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore('big-counter', () => {
  const count = ref(100)
  const addCount = (newToken) => {
    count.value += newToken
  }

  return {
    count,
    addCount
  }
})

通过 index.js 统一先导入,然后导出
stores/index.js

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()  // 创建
pinia.use(persist) // 持久化, 需要安装插件 简答配置
export default pinia
// import { useUserStore } from '@/stores/modules/user.js'
// export { useUserStore }
// import { useCounterStore } from '@/stores/modules/counter.js'
// export { useCounterStore }
// 简写
export * from './modules/user'
export * from './modules/counter'

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from '@/stores/index'  // 导入 pinia 
import '@/assets/main.scss'
const app = createApp(App)
app.use(pinia)  // 使用
app.use(router)
app.mount('#app')

**使用 **
下面是在 App.vue 中使用
App.vue

import { useUserStore, useCounterStore } from '@/stores/index'

④ 数据请求 axios 配置

创建 axios 实例 ( 基准地址, 超时时间 )
请求拦截器 ( 携带 token )
响应拦截器 ( 接收返回信息) ( 业务失败处理, 摘取核心响应数据 401 处理 )

参考地址

http://www.axios-js.com/zh-cn/docs/#axios-create-config

新建 utils/request.js 封装 axios 模块

import axios from 'axios'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
})
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    return config
  },
  (err) => Promise.reject(err)
)
instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    return res
  },
  (err) => {
    // TODO 5. 处理401错误
    return Promise.reject(err)
  }
)
export default instance

utils / request.js
补充

import axios from 'axios'
import { useUserStore } from '@/stores'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const UserStore = useUserStore()
    if (UserStore.token) {
      config.headers.Authorization = UserStore.token
    }

    return config
  },
  (err) => Promise.reject(err)
)

import { ElMessage } from 'element-plus'
import router from '@/router'
// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    // 业务失败，给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 =》 401 权限不足 或 token过期 =》 拦截到登陆
    if (err.response?.state === 401) {
      router.push('/login')
    }

    // 错误的默认情况 =》 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance

⑤ 配置路由