if(sessionStorage.getItem('create')==1){ sessionStorage.removeItem('create') this.$router.go(0) }

时间: 2024-06-05 10:11:52 浏览: 68

在vue项目中使用Nprogress.js进度条的方法

NProgress.js是专为单页面应用(SPA)设计的轻量级进度条组件，通过简洁的API和样式，能够在用户浏览网站时显示页面加载进度，提升用户体验。在Vue项目中集成NProgress.js非常简单，通过几个步骤即可完成进度条的引入和配置。需要安装NProgress.js。可以通过npm或yarn包管理器进行安装。在命令行中输入以下命令： ``` npm install --save nprogress # 或者 yarn add nprogress ``` 安装完成后，需要在Vue项目的入口文件中引入NProgress的JavaScript文件和CSS样式。通常，这一步是在`main.js`中完成： ```javascript import NProgress from 'nprogress' import 'nprogress/nprogress.css' ``` 在引入之后，接下来就可以在Vue组件中使用NProgress.js提供的方法来控制进度条的显示和隐藏了。最基本的方法是`NProgress.start()`和`NProgress.done()`。其中`NProgress.start()`用于开始显示进度条，而`NProgress.done()`用于结束并隐藏进度条。在Vue项目中，尤其是在使用Vue Router进行页面跳转时，可以在路由跳转前后进行进度条的控制。可以在`main.js`中使用Vue Router的导航守卫来实现这一点。例如，可以在`router.beforeEach`中判断是否需要显示进度条，并在路由跳转开始时调用`NProgress.start()`，在`router.afterEach`中调用`NProgress.done()`结束进度条显示： ```javascript router.beforeEach((to, from, next) => { if (to.path === '/login') { sessionStorage.removeItem('username'); } let user = sessionStorage.getItem('username'); if (!user && to.path !== '/login') { next({ path: '/login' }); } else { NProgress.start(); next(); } }); router.afterEach(transition => { NProgress.done(); }); ``` 在这个例子中，首先检查目标路径是否为登录页，如果是，则清除存储中的用户名信息。如果不是登录页，则判断用户是否已经登录，如果未登录，则重定向到登录页；如果已登录，则开始进度条，并继续路由跳转。在每次路由跳转完成后，通过`router.afterEach`调用`NProgress.done()`结束进度条。总结来说，NProgress.js为Vue项目提供了一个简单有效的方法来添加进度条，以提升用户在页面加载时的视觉体验。通过在Vue Router中合理地使用导航守卫，可以轻松控制进度条的显示时机，使其与应用的页面加载状态相匹配。这不仅增加了页面的专业感，也能够在一定程度上缓解用户在页面加载时的焦虑情绪。如果在使用NProgress.js时遇到问题，可以根据文章描述或者留言反馈，作者会及时给予回应和帮助。同时，也可以通过阅读官方文档来获取更多详细信息和高级用法。

这段代码是在Vue.js中使用sessionStorage检查是否创建了一个数据，并在检查后将其从sessionStorage中删除，然后重新加载页面。其中，`sessionStorage.getItem('create')==1`用于检查是否创建了一个数据，如果是，则执行下面的代码，否则不执行任何操作。`sessionStorage.removeItem('create')`用于删除sessionStorage中的数据，然后`this.$router.go(0)`用于重新加载页面。

阅读全文

if(sessionStorage.getItem('create')==1){ sessionStorage.removeItem('create') this.$router.go(0) }

相关推荐

Vue登录拦截 登录后继续跳转指定页面的操作

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

Vue.js实战：使用Vuex和Axios实现登录验证与状态保持

Python基于yolo的健身姿势检测与姿态矫正建议系统源代码+使用说明

使用谷歌地球引擎（GEE）和 Python 在孟加拉国西北部绘制基于机器学习算法的作物类型图.ipynb

【光伏预测】基于蛇群优化算法SO优化高斯过程回归GPR实现光伏多输入单输出预测附Matlab代码.rar

【光伏预测】基于鹈鹕优化算法POA优化高斯过程回归GPR实现光伏多输入单输出预测附Matlab代码.rar

深度学习图形识别点位知识

【创新未发表】Matlab实现引力搜索优化算法GSA-GRU实现风电数据预测算法研究.rar

【元胞自动机】基于matlab元胞自动机交通流仿真带有弯道的单车道（含时空图）【含Matlab源码 9047期】.mp4

编译原理实战-基于c语言实现表达式计算器+项目源码+文档说明

毕业设计&课设-用于 Spring Boot 的开源渗透框架及高危漏洞利用工具.zip

【创新未发表】Matlab实现人工蜂鸟优化算法AHA-GRU实现风电数据预测算法研究.rar

基于二阶锥松弛的分布式电源接入配电网潮流求解方法及算例

chart.js 4.4.6版

基于matlab GUI界面的疲劳检测系统源码+文档说明（毕业设计和课程设计都适用）

计算机图形学之动画和模拟算法：Procedural Animation：碰撞检测与响应.docx

斯坦福最新2017年cs231n课程ppt-16

Matlab实现牛顿拉夫逊优化算法NRBO-Kmean-Transformer-BiLSTM负荷预测算法研究.rar

最新推荐

Python基于yolo的健身姿势检测与姿态矫正建议系统源代码+使用说明

Android圆角进度条控件的设计与应用

管理建模和仿真的文件

【R语言lattice包实战】：从案例到技巧，图形制作不再难

输入正整数n.打出长度为n的菱形

mui框架实现带侧边栏的响应式布局

"互动学习：行动中的多样性与论文攻读经历"

【交互式图形】：Shiny应用中lattice包的巧妙应用指南

安装包部署到docker中

Android仿知乎横线直线进度条实现教程

Vue登录拦截登录后继续跳转指定页面的操作