前言：好久不更博客了。已经从AngularJS转移到了vue的阵营。最近上线了一个vue的项目，在此分享一些简单实用的代码片段。
1、全局增加进度条提示
nprogress地址
// main.js 入口js文件import VueRouter from 'vue-router'import NProgress from 'nprogress'Vue.use(VueRouter); //注册路由插件 NProgress.configure({ showSpinner: false }); //进度条配置router.beforeEach((to, from, next) => {NProgress.start(); }) router.afterEach(transition => {NProgress.done(); });2、路由拦截
router.beforeEach((to, from, next) => { //假设登陆成功后，user信息保存在sessionStorage中。if (to.path == '/login') {sessionStorage.removeItem('user');//如果访问登录页，清空之前sessionStorage中的user信息}let user = JSON.parse(sessionStorage.getItem('user'));if (!user && to.path != '/login') {next({ path: '/login' })} else {next()} //如果访问非登陆页，判断是否有保存的user信息，如果没有，则判断为非法访问，重定向到登录页面 })3、路由切换动效
<!--app.vue 根组件-->
<template><div id="app"><transition name="fade" mode="out-in"><router-view></router-view></transition></div>
</template>
<script>export default {name: 'app',components: {}} </script>
<style>.fade-enter-active,.fade-leave-active {transition: opacity .2s ease;}.fade-enter,.fade-leave-active {opacity: 0;} </style>4、路由嵌套
//router.js import a from 'a.vue' import a from 'b.vue' import a from 'c.vue' import a from 'main.vue' let routes = [{path: '/login',component: a,name: 'a' },{path: '/',component: main,name: '数据中心',iconCls: 'iconfont icon-shuju', //假装有个icon图标children: [{ path: '/main/b', component: b, name: 'b' },{ path: '/main/c', component: c, name: 'c' },]}, ] export default routes;//main.js 入口js文件 import routes from './routesconst router = new VueRouter({mode: 'history',routes }) new Vue({el: '#app',template: '<App/>',router,components: { App } }).$mount('#app')ps：路由的配置，启动，挂载可以分别放在不同的页面。将模块化进行到底。routes对象，甚至可以来自于vuex，便于管理数据。如下例子：
//menus.js 属于vuex模块 export default {'0': 'all','2': 'breast','3': 'leg','4': 'face','5': 'others','6': 'buttocks','7': 'stockings' } //router.js 路由文件 import menus from '../store/menus'; //引入 const getRouters = () => {return Object.keys(menus).map(key => {return {path: `/${menus[key]}/:page(\\d+)?`,component: createListView(Number(key))}}) } export default new Router({mode: 'history',routes: [{ path: 'a', component: a },...getRouters()] }) 5、全局过滤器
一个项目中，可能要用到很多过滤器来处理数据，多个组件公用的，可以注册全局过滤器。单个组件使用的，就挂载到实例filters中。
项目做的多了以后，可以整理一套常用的filters，不用反复的写。比如：时间等各种操作，数据格式转化，单位换算，部分数据的md5加密等…
//filters.js 过滤器文件 export function formatDateTime (date) {//格式化时间戳var y = date.getFullYear()var m = date.getMonth() + 1m = m < 10 ? ('0' + m) : mvar d = date.getDate()d = d < 10 ? ('0' + d) : dvar h = date.getHours()var minute = date.getMinutes()minute = minute < 10 ? ('0' + minute) : minutereturn y + '-' + m + '-' + d + ' ' + h + ':' + minute } export function test (a) {return `${a}aaaa` } ...... //main.js 入口js文件 import Vue from 'vue' import * as filters from './filters'Object.keys(filters).forEach(key => {Vue.filter(key, filters[key]) }) 6、http拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供通用的处理方式。
- axios实现-axios全攻略
// http request 拦截器 axios.interceptors.request.use(config => {if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上tokenconfig.headers.Authorization = `token ${store.state.token}`;}return config;},err => {return Promise.reject(err);});// http response 拦截器 axios.interceptors.response.use(response => {return response;},error => {if (error.response) {switch (error.response.status) {case 401:// 返回 401 清除token信息并跳转到登录页面store.commit(types.LOGOUT);router.replace({path: 'login',query: {
redirect: router.currentRoute.fullPath}})}}return Promise.reject(error.response.data) // 返回接口返回的错误信息});- vue-resource实现-vue-resource全攻略
Vue.http.interceptors.push((request, next) => {console.log(this)//此处this为请求所在页面的Vue实例// modify requestrequest.method = 'POST';//在请求之前可以进行一些预处理和配置// continue to next interceptornext((response) => {
//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法response.body = '...';return response;}); });结尾：以上代码片段，敬请补充，我会持续更新。后续会写一些简单的vue组件，插件实现。如果感兴趣可以关注。