提交

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.8.3",
         "element-plus": "^2.3.7",
         "masonry-layout": "^4.2.2",
+        "nprogress": "^0.2.0",
         "sass-loader": "^8.0.0",
         "vue": "^3.2.13",
         "vue-meta": "^3.0.0-alpha.2",
@@ -7208,6 +7209,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -15847,6 +15853,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "element-plus": "^2.3.7",
     "masonry-layout": "^4.2.2",
+    "nprogress": "^0.2.0",
     "sass-loader": "^8.0.0",
     "vue": "^3.2.13",
     "vue-meta": "^3.0.0-alpha.2",

src/App.vue

@@ -73,8 +73,8 @@ img {
   width: 1200px;
 }
 
-.box-min-1200-src{
-  min-width:1200px;
+.box-min-1200-src {
+  min-width: 1200px;
   overflow-x: scroll;
 }
 

src/main.js

@@ -24,7 +24,8 @@ import {
   ElSkeletonItem,
   ElBreadcrumb,
   ElAffix,
-  ElConfigProvider
+  ElConfigProvider,
+  ElProgress
   // 其他需要的组件
 } from 'element-plus'
 
@@ -67,6 +68,7 @@ app.use(ElSkeletonItem)
 app.use(ElMessage)
 app.use(ElBreadcrumb)
 app.use(ElAffix)
+app.use(ElProgress)
 
 app.use(ElConfigProvider)
 

src/router/index.js

@@ -2,6 +2,17 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import { setSeoTitle } from '@/utils/util.js'
 import store from '@/store'
+//导入包
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+NProgress.configure({
+  easing: "ease", // 动画方式
+  speed: 2500, // 递增进度条的速度
+  showSpinner: false, // 是否显示加载ico
+  trickleSpeed: 200, // 自动递增间隔
+  minimum: 0.9, // 初始化时的最小百分比
+});
 
 const routes = [
   {
@@ -10,8 +21,8 @@ const routes = [
     component: HomeView,
     meta: {
       title: "首页",
-      path:'/',
-      topBarShow:true
+      path: '/',
+      topBarShow: true
     }
   },
   {
@@ -31,7 +42,7 @@ const routes = [
     name: 'edit',
     component: () => import(/* webpackChunkName: "edit" */ '@/views/edit.vue'),
     meta: {
-      path:'/edit'
+      path: '/edit'
     }
 
   },
@@ -41,8 +52,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "user" */ '@/views/user.vue'),
     meta: {
       title: "我的",
-      path:'/user',
-      topBarShow:true
+      path: '/user',
+      topBarShow: true
     }
   },
   {
@@ -51,7 +62,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "detail" */ '@/views/detail.vue'),
     meta: {
       title: "详情",
-      path:'/detail',
+      path: '/detail',
     }
   },
   {//个人房源
@@ -59,8 +70,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue'),
     meta: {
       title: '个人房源',
-      path:'/personHousing',
-      topBarShow:true
+      path: '/personHousing',
+      topBarShow: true
     }
   },
   {//中介房源
@@ -68,8 +79,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue'),
     meta: {
       title: '中介房源',
-      path:'/intermediaryHousing',
-      topBarShow:true
+      path: '/intermediaryHousing',
+      topBarShow: true
     }
   },
   {//求房源
@@ -77,8 +88,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/needHousing.vue'),
     meta: {
       title: '求房源',
-      path:'/needHousing',
-      topBarShow:true
+      path: '/needHousing',
+      topBarShow: true
     }
   },
   {//搜索
@@ -86,7 +97,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "seachPage" */ '@/views/seachIndex.vue'),
     meta: {
       title: '搜索',
-      path:'/seachPage'
+      path: '/seachPage'
     }
   },
   {
@@ -94,8 +105,8 @@ const routes = [
     component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/apartment.vue'),
     meta: {
       title: "品牌公寓",
-      path:'/apartment',
-      topBarShow:true
+      path: '/apartment',
+      topBarShow: true
     }
   },
   {
@@ -103,7 +114,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "housing" */ '@/views/apartmentDetail.vue'),
     meta: {
       title: "品牌公寓详情",
-      path:'/apartmentDetail'
+      path: '/apartmentDetail'
     }
   }
 ]
@@ -120,10 +131,18 @@ const router = createRouter({
 
 
 router.beforeEach((to, from, next) => {
+  //进度条开始
+  NProgress.start();
+  //随机增加进度
+  NProgress.inc();
+
   next()
   let meta = to['meta'] || {}
   let title = meta['title']
   if (title) setSeoTitle(title)
 })
 
+router.afterEach(() => {
+  NProgress.done();
+})
 export default router