【Vue其他补充】待完善

一、Vue中nprogress可以添加页面顶部加载进度条。

参考：https://blog.csdn.net/qq_43770056/article/details/123350416

 1、安装，npm安装报错，使用cnpm替代。cnpm install --save nprogress

2、在路由中引入，router/index.js中：

import nprogress from 'nprogress'

router.beforeEach((to, from, next) => {

    nprogress.start()

    if(to.meat&&to.meat.title)document.title=to.meta.title

    next()

})

router.afterEach(() => {

    nprogress.done()

})

3、修改颜色和样式（需写全局App.vue）

<style>

#nprogress .bar {

  background: #0125f1 !important;

  height: 5px !important;

}

</style>

 

二、配置各vue页面的document.title标题

1、在routers/index.js路由各个跳转中配置meta对象

 { path: 'orderlist', meta: { title: "列表" }, component: () => import("@/views/mymain/OrderList.vue") },

           

2、在前置全局守卫中添加meta，写入页面。

router.beforeEach((to, from, next) => {

    nprogress.start()

    if(to.meta&&to.meta.title)document.title=to.meta.title

    next()

})