vue-navigation-progress-plugin
支持vue-router + webpack2 代码分割的路由进度显示
Important
- 如果使用代码分割,异步组件加载需使用
Webpack2
的System.import()
Installation
- via CDN
<script src="https://unpkg.com/vue-navigation-progress-plugin/dist/vue-navigation-progress-plugin.min.js"></script>
simple example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vue-navigation-progress-plugin/dist/vue-navigation-progress-plugin.min.js"></script>
</head>
<body>
<div id="app">
<!-- 放置进度条组件 -->
<router-progress></router-progress>
<router-view></router-view>
</div>
<template id="index">
<div>
<h1>this is index page</h1>
<router-link to="/list">go to list</router-link>
</div>
</template>
<template id="list">
<div>
<h1>this is list page</h1>
<router-link to="/">go to index</router-link>
</div>
</template>
<script>
Vue.use(VueRouter);
var router = new VueRouter({
routes: [{
path: "/",
component: { template: "#index" },
meta: { title: "首页" }
}, {
path: "/list",
component: { template: "#list" },
meta: { title: "列表页" }
}]
});
Vue.use(vueNavigationProgressPlugin, router);
new Vue({
el: "#app",
router
})
</script>
</body>
</html>
- via NPM
$ npm install vue-navigation-progress-plugin --save # Or
$ yarn add vue-navigation-progress-plugin
simple example
// main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App";
import vueNavigationProgressPlugin from "vue-navigation-progress-plugin";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{
path: "/",
component: () => System.import("components/index.vue") // 注意 必须使用System.import
},{
path: "/list",
component: () => System.import("components/list.vue")
}]
});
Vue.use(vueNavigationProgressPlugin, router);
new Vue({
el: "#app",
router,
render: h => h(App)
});
<!-- like App.vue -->
<template>
<div id="app">
<!-- 放置进度条组件 -->
<router-progress/>
<router-view/>
</div>
</template>
Dependencies
babel-eslint: ^7.1.1cssnano: ^3.10.0eslint: ^3.14.1eslint-config-standard: ^6.2.1eslint-friendly-formatter: ^2.0.7eslint-loader: ^1.6.1eslint-plugin-html: ^2.0.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^2.0.1mime: ^1.3.4mkdirp: ^0.5.1replace-in-file: ^2.5.0rollup: ^0.41.4rollup-plugin-buble: ^0.15.0rollup-plugin-css-only: ^0.2.0rollup-plugin-vue2: ^0.8.0stylus: ^0.54.5uglify-js: ^2.8.10