vue3问诊项目第二天学习总结1、vue2和vue3下面的路由区别 2、route.query后面字段的细节 3、rou

1、vue2和vue3下面的路由区别

2、route.query后面字段的细节

    router.push(route.query.returnUrl as string)

3、router.replace()的应用场景

登录界面：访问playground界面 =》登录界面 =》跳转到playground界面。
付款界面：付款界面付完钱后(replace) =》跳转到结果页。

4、对象的中括号语法

    const obj.a = 12
    const ojb['a'] = 12
    const method1 = 'get'
    const method2 = 'post'
    
    const methods = {
        [method1 == 'get' ? : 'params' ? 'data' ]: 111
    }

5、封装请求工具函数

拦截器逻辑

token请求头携带，错误响应处理，401错误处理。

import { useUserStore } from '@/stores'
import router from '@/router'
import axios from 'axios'
import { showToast } from 'vant'

// 1. 新axios实例，基础配置
const instance = axios.create({
  baseURL: 'https://consult-api.itheima.net/',
  timeout: 10000
})

// 2. 请求拦截器，携带token
instance.interceptors.request.use(
  (config) => {
    const store = useUserStore()
    if (store.user?.token && config.headers) {
      config.headers['Authorization'] = `Bearer ${store.user?.token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 3. 响应拦截器，剥离无效数据，401拦截
instance.interceptors.response.use(
  (res) => {
    // 后台约定，响应成功，但是code不是10000，是业务逻辑失败
    if (res.data?.code !== 10000) {
      showToast(res.data?.message || '业务失败')
      return Promise.reject(res.data)
    }
    // 业务逻辑成功，返回响应数据，作为axios成功的结果
    return res.data
  },
  (err) => {
    if (err.response.status === 401) {
      // 删除用户信息
      const store = useUserStore()
      store.delUser()
      // 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用
      router.push({
        path: '/login',
        query: { returnUrl: router.currentRoute.value.fullPath }
      })
    }
    return Promise.reject(err)
  }
)

export { baseURL, instance }

几个小问题

为什么登录的时候把密码改错
- 测试业务逻辑失败
登录成功，看res打印干嘛
- 看数据剥离是否成功
测试获取用户信息成功时干嘛
- 查看是否携带token
把token删除或修改，获取用户信息失败，，是测试啥
- 测试401 token失效是否能够跳转到login界面

6、自动导入vite插件实现vant组件自动导入

    # 通过 npm 安装
    npm i unplugin-vue-components -D
    # 通过 yarn 安装
    yarn add unplugin-vue-components -D
    # 通过 pnpm 安装
    pnpm add unplugin-vue-components -D

7、组件代码片段

配置快捷键链接 https://snippet-generator.app/

8、自动按需加载

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

    // 安装插件
    
    # 通过 npm 安装
    npm i unplugin-vue-components -D

    # 通过 yarn 安装
    yarn add unplugin-vue-components -D

    # 通过 pnpm 安装
    pnpm add unplugin-vue-components -D
    
    
    // 配置
    
    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()],
        }),
      ],
    };

这里要注意的一个点是：引入函数组件的样式，函数组件需要单独引入，所以我们在main.ts中先导入 import 'vant/lib/index.css' 但是为了避免此时非函数组件的样式自动导入需要在vite.config.js中设置

9、深度选择器—深度作用其他组件样式

10、顶部组件的右侧按钮的自定义事件如何实现

子传父：通知父亲后在父组件

11、路由回退功能

router.back() 《==》 router.go(-1)
细节处理：
- 在history.state.back 能看到回退地址，若为null回退到首页，否则回到对应的路径

    if(history.state.back) {
        router.back()
    }else{
        router.push('/')
    }

11、顶部固定

设置placeholder属性

12、给组件cp-nav-bar添加类型使得代码写的时候有提示

    // 这个可以参考框架内置写法：
    declare module 'vue' {
        interface GlobalComponents {
            VanNavBar: typeof NavBar;
        }
    }


    // 根据框架的写法做个修改即可
    import CpNavBar from '@/components/CpNavBar.vue'

    declare module 'vue' {
      interface GlobalComponents {
        CpNavBar: typeof CpNavBar
      }
    }

13、表单校验

手机号校验： / ^1[3-9]\d{9}$ /
4-24位密码校验：/^\w{8,24}$/

14、登录功能

15、携带url并在另一个界面获取

    const returnUrl = route.query.returnUrl as string
    router.push(returnUrl || '/user')
    router.replace('/user')