希望在两种情况下实现不同的滚动行为: 当用户通过点击链接跳转到新页面时,希望页面滚动到顶部 当用户使用浏览器的返回按钮时,希望页面恢复到之前的滚动位置 Vue Router 的 scrollBehavior 函数可以帮助我们解决这个问题,它可以根据导航类型来决定滚动行为。 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), scrollBehavior(to, from, savedPosition) …

2025-04-10 0条评论 71点热度 0人点赞 admin 阅读全文

使用若依框架,新增了一个vue页面后,发现当前页面的标签页可以打开,但是再切换到其他页面就无法显示了,控制台报错: TypeError: Cannot read properties of null (reading 'nextSibling') 查了很多,最后发现原因是<template></template>中的没有一个单独的根元素的问题,因为vue3不再要求template里只需要一个根元素了,但是发现在若依中还是需要的 原来这样写(均不行): <template> Hel…

2025-03-29 0条评论 146点热度 0人点赞 admin 阅读全文

效果动画图: 完整代码如下 <template> <div class="number-flip"> <div class="box-item" v-for="(digit, index) in digits" :key="index"> <span class="item-num" ref="spanRefs">0123456789</span> </div> </div> </template> <script…

2024-12-18 0条评论 854点热度 0人点赞 admin 阅读全文

开发环境是vue,需要实现一个在网页上动态漂浮的窗口,漂浮到边界处,再弹回来。点击浮窗,可以跳转到新页面。 Baywindow.vue <template> <!-- 飘窗效果 --> <div id="thediv" ref="thediv" style="position: absolute; z-index: 111; left: 0; top: 0" v-show="thedivShow" @mouseover="clearFdAd" @mouseout="starFdAd" …

2024-01-01 0条评论 804点热度 0人点赞 admin 阅读全文

某些场景下,需要使用自定义的字体,例如类似计算器的显示效果,还有用户的手机使用了卡通字体的效果,但是希望我们的应用还是需要显示传统的字体。 实现方式: 准备好自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),进入项目中在assets文件夹下建一个font文件夹,把字体文件放进去 把拿到的字体包放到font文件夹中接着创建一个font.css文件,内容如下(以pingfang字体为例): @font-face { font-family: 'PingFang-RE'; /* 重命名字体名 */ …

2023-11-11 0条评论 444点热度 0人点赞 admin 阅读全文

因为域名有限,所以想把vue项目部署在某个域名的二级路径上,例如:https://www.example.com/someapp/下 nginx的配置如下: location ^~ /someapp/ { index index.html; alias /opt/someapp/; try_files $uri $uri/ /someapp/index.html; } 在/opt/下新建someapp目录,里面放的就是vue项目打包后的html文件 修改路由文件:router/index.js,主要是history…

2023-10-08 0条评论 1922点热度 0人点赞 admin 阅读全文

vue2项目中的路由页面,希望可以为每个页面设置不同的标题(title),就是显示在浏览器或微信中的标题。 总结以下的2种方式: 方式1,router/index.js 中增加如下代码: import Vue from 'vue'; const DEFAULT_TITLE = '这是个默认的标题'; router.beforeEach((to, from) => { Vue.nextTick(() => { document.title = to.meta.title || DEFAULT_TITLE;…

2023-09-17 0条评论 501点热度 0人点赞 admin 阅读全文

vue的项目,运行run serve的时候,控制台没有报错,但是打开首页,显示: Cannot GET / 网上知道有这几种解决方案,整理下,供参考: 打包的时候会把config文件夹下index.js的assetsPublicPath改成了 "./“ ,再次编译 npm run dev 却没有改回来 ,去掉 . 改成/就可以  把项目下的node_modules文件夹删除,然后重新npm install

2023-09-03 0条评论 1748点热度 0人点赞 admin 阅读全文

ElementPlus/Vue3项目启动时候,遇到如下错误: error in ./src/i18n/index.ts Module not found: Error: Package path ./lib/locale/lang/zh-cn is not exported from package /path/to/project/node_modules/element-plus (see exports field in /path/to/project/node_modules/element-plus/p…

2023-08-28 0条评论 1790点热度 1人点赞 admin 阅读全文

前端Vue项目使用npm run启动的时候,遇到如下报错,无法启动 Error: error:0308010C:digital envelope routines::unsupported 具体信息如下: > [email protected] serve > vue-cli-service serve INFO Starting development server... 10% building 2/3 modules 1 active ...website/node_modules/cache-…

2023-07-29 0条评论 666点热度 0人点赞 admin 阅读全文
123457