1.router中使用pinia报错
pinia.mjs:1709 Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.at useStore (pinia.mjs:1709:19)at index.ts:6:15
分析原因:因为在mian.js中,注册router总比pinia先,所以不能使用到store/index.js文件中createPinia方法
解决方法:把store实例化放到路由守卫函数里面
import { createRouter } from 'vue-router'
const router = createRouter({// ...
})// ❌ 由于引入顺序的问题,这将失败
const store = useStore()router.beforeEach((to, from, next) => {// 我们想要在这里使用 storeif (store.isLoggedIn) next()else next('/login')
})router.beforeEach((to) => {// ✅ 这样做是可行的,因为路由器是在其被安装之后开始导航的,// 而此时 Pinia 也已经被安装。const store = useStore()if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})
参考:
添加链接描述
pinia
2.路由报错
vue-router.mjs:35 [Vue Router warn]: No match found for location with path "/"
warn @ vue-router.mjs:35
显示另外 1 个框架
收起
参考:
https://blog.csdn.net/weixin_45952652/article/details/131192829
https://blog.csdn.net/m0_64344940/article/details/130710796
3.vue 样式穿透
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.
把::v-deep 替换为 :deep()
参考:
https://blog.csdn.net/weixin_43405300/article/details/132099608
4.defineProps
is a compiler macro and no longer needs to be imported
[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
[@vue/compiler sfc]defineEmits
是一个编译器宏,不再需要导入。
[@vue/compiler sfc]`defineProps’是一个编译器宏,不再需要导入。
文件里把这两个引用去掉即可
import { defineEmits, defineProps, computed } from 'vue'
改为
import { computed } from 'vue'
5.前端什么时候使用formdata
学习项目时发现封装了一个上传hook:
用于上传表单数据,
import axios from "axios";function upload(path: string, userForm: any) {const params = new FormData()for (const i in userForm) {params.append(i, userForm[i])}// console.log(params)return axios.post(path, params, {headers: {"Content-Type": "multipart/form-data"}}).then(res => res.data)
}export default upload
那么new FormData()的作用是什么,为什么要用?
new FormData() 是 JavaScript 中的一个构造函数,用于创建新的 FormData 对象。FormData 对象用于存储键值对,并且可以模拟表单数据(表单元素和它们的值)的序列化。
需要发送二进制数据或大文件时,使用FormData非常有用
“Content-Type” 是一个 HTTP 请求头,它告诉服务器发送过来的数据是什么类型。在这种情况下,“multipart/form-data” 是一种编码类型,用于发送表单数据。这种编码类型常常用于发送包含文件上传的表单数据,因为它可以处理二进制数据和非文本数据。
常见的 Content-Type 头字段有以下几种:
application/json:用于表示 JSON 格式的数据。
application/xml:用于表示 XML 格式的数据。
text/plain:用于表示纯文本数据。
text/css:用于表示 CSS 样式表。
image/png、image/jpeg、image/gif 等:用于表示图片数据。
audio/mpeg、audio/mp3、audio/wav 等:用于表示音频数据。
video/mp4、video/webm、video/ogg 等:用于表示视频数据。
multipart/form-data:用于表示 Multipart/form-data 格式的数据,常用于文件上传。
application/x-www-form-urlencoded:用于表示 URL 编码的表单数据。
6.路由守卫中设置网页title
在路由中设置meta增加title
const routes = [ { path: '/', component: Home, meta: { title: '首页' } }, { path: '/about', component: About, meta: { title: '关于我们' } }
]
在路由守卫中设置标题
import Vue from 'vue';
import Router from 'vue-router'; Vue.use(Router); const router = new Router({ routes, // 在这里添加路由守卫来设置标题 beforeEach(to, from, next) { document.title = to.meta.title; // 设置页面标题为当前路由的 meta.title next(); // 一定要调用 next() 方法,否则路由不会继续导航 }
});
Vue Router中meta
属性如下:
属性名 | 作用 |
---|---|
title | 设置页面的标题,用于显示在浏览器标签页上 |
description | 为路由提供一个简短的描述,可用于SEO优化和搜索引擎结果描述 |
params | 定义路由参数,用于在路由组件中获取和使用这些参数 |
redirect | 重定向到另一个路由,当用户访问当前路由时,直接跳转到指定的路由 |
props | 控制路由组件的props是否可以被子路由继承 |
alias | 设置当前路由的别名,方便进行路由导航和URL管理 |
children | 定义当前路由的子路由,用于组织嵌套路由 |
index | 定义路由的初始组件,当访问该路由时,首先显示该组件 |
controller | 自定义路由的控制器,用于处理路由导航和渲染组件的逻辑 |
meta | 自定义元信息,可以在路由守卫、导航钩子等地方获取并使用这些信息 |