使用ngprogress做页面跳转动画要在Vue应用程序中使用ngprogress来实现页面跳转动画，可以按照以下步骤进

要在Vue应用程序中使用ngprogress来实现页面跳转动画，可以按照以下步骤进行操作：

安装ngprogress。在项目目录下执行以下命令：
```
npm install ngprogress --save
```

在Vue应用程序的入口文件（通常是main.js）中导入并配置ngprogress：

import Vue from 'vue';
import NgProgress from 'ngprogress';
import 'ngprogress/ngprogress.css';

Vue.use(NgProgress);

const ngProgress = new NgProgress();
Vue.prototype.$ngProgress = ngProgress;

new Vue({
  // ...
}).$mount('#app');

创建一个自定义指令，用于在页面跳转时控制ngprogress的动画效果。例如，创建一个名为progress的指令：
```
// progress.js

import Vue from 'vue';

Vue.directive('progress', {
  bind(el, binding) {
    const ngProgress = Vue.prototype.$ngProgress;
    ngProgress.start();

    el.addEventListener('click', () => {
      ngProgress.done();
    });

    window.addEventListener('beforeunload', () => {
      ngProgress.start();
    });
  }
});
```
在上面的示例中，我们使用ngProgress.start()启动ngprogress动画，并在点击事件发生时调用ngProgress.done()结束动画。另外，我们还在窗口beforeunload事件上重新启动动画，以确保在页面跳转时动画正确显示。
在需要应用页面跳转动画的元素上使用自定义指令v-progress：
```
<template>
  <div>
    <button v-progress @click="navigateTo('/some-route')">跳转</button>
  </div>
</template>
```
在上述示例中，我们将v-progress指令应用到按钮元素上，并在点击事件中执行相应的页面跳转操作（例如调用navigateTo方法）。

请注意，上述示例是一个基本的示范，你可以根据具体需求对其进行修改和扩展。例如，你可以根据不同的路由切换事件来启动和结束ngprogress动画，以获得更精确的控制。