vue路由进度条nprogress

这是一个轻量级的优化用户体验工具
我们先引入他的第三方依赖工具

npm install --save nprogress

然后在路由文件中引入这个依赖

import NProgress from 'nprogress'
import VueRouter from "vue-router";
import Home from "../pages/Home";
import About from "../pages/About";

const router = new VueRouter({
    
    
    routes:[
        {
    
       
            path:"/about",
            component:About,
            meta:{
    
    
                title:"关于"
            }
        },
        {
    
    
            path:"/home",
            component:Home,
            meta:{
    
    
                isAuth:true,
                title:"首页"
            }
        }
    ]
})

router.beforeEach((to,from,next) => {
    
    
      next();
      NProgress.start()
})

router.afterEach((to,from) => {
    
    
    document.title = to.meta.title || "嘎嘎嘎官网";
})
export default router;

因为路由跳转是异步的 在跳转执行中我们 nprogress的start动画就会起到效果了
这样在路由跳转是就会有个小进度条 整体上还是很不错的