「vue-progressbar」をvue-routerに実装する

はじめに

前回、プログレスバーを実装するライブラリ「vue-progressbar」をご紹介しました。

「vue-progressbar」でプログレスバーを実装する

 

今回はvue-progressbarをvue-routerに実装しようと思います。

 

環境

Vue.js: 2.6.10
vue-progressbar: 0.7.5
vue-router: 3.0.6

 

導入手順

1. ライブラリの取り込み

metaプロパティにprogressのプロパティを設定しています。
これでページ毎のprogressを設定する事ができます。

Vue.use(window.VueProgressBar);
//or webpack↓
//import Vue from 'vue' 
//import VueRouter from 'vue-router'
//import VueProgressBar from 'vue-progressbar'
//Vue.use(VueProgressBar);

var Foo = { template: '<div>foo</div>' }
var Bar = { template: '<div>bar</div>' }
var routes = [
  { 
    path: '/foo', 
    component: Foo,
    meta: {
      progress: {
        func: [
          {call: 'color', modifier: 'temp', argument: '#ffb000'},
          {call: 'fail', modifier: 'temp', argument: '#6e0000'},
          {call: 'location', modifier: 'temp', argument: 'top'},
          {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
        ]
      }
    }
  },
  { 
      path: '/bar', 
      component: Bar,
      meta: {
        progress: {
          func: [
            {call: 'color', modifier: 'temp', argument: '#ffb000'},
            {call: 'fail', modifier: 'temp', argument: '#6e0000'},
            {call: 'location', modifier: 'temp', argument: 'top'},
            {call: 'transition', modifier: 'temp', argument: {speed: '1.5s', opacity: '0.6s', termination: 400}}
          ]
        }
    }
  }
]

var router = new VueRouter({
  routes
})

var app = new Vue({
  router,
  mounted () {
    this.$Progress.finish()
  },
  created () {
    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  }
}).$mount('#app')

２. テンプレートを準備

<div id="app">
    <h1>Vue vue-progressbar</h1>
    <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
    <vue-progress-bar></vue-progress-bar>
</div>

 

デモ

>>専用ページで確認する

 

まとめ

vue-progressbarをvue-routerに実装するでした。

ちょっと時間が無くて記事が大雑把になってしまいました。
時間ができたタイミングで修正を入れてい行きたいと思います。

 

今日はこの辺でー