公司网站建设济南兴田德润厉害吗,施工企业资质认定2022,安康网站开发公司,网站制做vue 页面跳转时#xff0c;浏览器上方显示进度条 文章目录 vue 页面跳转时#xff0c;浏览器上方显示进度条先看效果一、安装 nprogress二、main.js 引入nprogress1.引入库 三、在router.js中对路由钩子进行设置四、测试 先看效果 vue 页面跳转时#xff0c;浏览器上方显示进…vue 页面跳转时浏览器上方显示进度条 文章目录 vue 页面跳转时浏览器上方显示进度条先看效果一、安装 nprogress二、main.js 引入nprogress1.引入库 三、在router.js中对路由钩子进行设置四、测试 先看效果 vue 页面跳转时浏览器上方显示进度条 一、安装 nprogress 1.安装 nprogress yarn add nprogress二、main.js 引入nprogress
1.引入库 代码如下示例 //引入nprogress
import NProgress from nprogress // 进度条
import nprogress/nprogress.css //这个样式必须引入
// 简单配置
NProgress.inc(0.2)
NProgress.configure({easing: ease, speed: 500, showSpinner: false})三、在router.js中对路由钩子进行设置 // 当路由请求之前router.beforeEach((to, from , next) {// 每次切换页面时调用进度条NProgress.start();// 这个一定要加没有next()页面不会跳转的next();});// 当路由请求之后关闭进度条router.afterEach(() { // 在即将进入新的页面组件前关闭掉进度条NProgress.done()
})四、测试
