vue-router Error: Redirected from X to Y via a navigation guard.

typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...

eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这...

动态路由这个其实在3版也有，不过3版原来使用的api是addRoutes，这个api顾名思义，就是可以传入一个路由数组来进行注册，后来被废弃，现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由，但是有两种用法：添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由，父路由必须有name属性route...

创建路由实例方式改变3版本的时候是通过new的方式创建路由实例，4版本是改用了createRouter的方式：import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制，值为字符串，现在通过import引入不同函数来创建不同的路由模式："history"改为createWebHistory()"hash"改为createWebHashHistory()"abstract"...

前言使用了ts最头疼的是什么，除了类型声明应该没有第二家了，那么在vue3中如何正确的声明ts类型，代表着我们踏出了认识vue3的第一步，这非常重要，所以为此水个文章，分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要，因为一直使用的Vetur，而且这个插件刚出来时并不完善，各种视频up讲的那个一键分屏功能其实也并不好用，虽然是个很有意思的东西，但是没有那种非要使用它的点，所以当时的我怀着这么一个疑问？为什么要用Volar ？现在我就通过两张图告诉你，它有多香！我们在template里面写代码，绑定变量最烦的是什么，就是我们写了个对象，但是忘了它的属性有哪些啊，使用...

前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

概述一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api：registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...

安装vue2版需要安装8.x版本的，9.x的是vue3版本使用上大同小异。vue2安装：yarn add vue-i18n@8vue3安装：yarn add vue-i18n封装官方虽然支持很不错的用法，但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...

当项目需要和其他项目进行沟通的时候，往往常见的做法就是，我在a网站点击一个按钮，在链接中携带query参数啥的，然后去访问b网站页面。此时可能会有两种情况：跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板，跳板会对参数做一些操作，然后进行重定向。两种做法都各有优势：第一种省事简单，但是如果以后b网站链接层级发生变化，那么就会导致链接不可能，到时候还需要进行修改，很痛苦。第二种的话，我们需要写一个跳板页面，但是通过一些参数要求，甚至自身加上一些逻辑处理，那么他的功能性会更强一些。那么，在vue中，做一个重定向页面，怎么做？思路思路1利用路由守卫，当链接上存在某个参数的时候，...

自己去注册吧，提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...