前言：好久不更博客了。已經(jīng)從angularjs轉(zhuǎn)移到了vue的陣營(yíng)。最近上線了一個(gè)vue的項(xiàng)目，在此分享一些簡(jiǎn)單實(shí)用的代碼片段。

1、全局增加進(jìn)度條提示
nprogress地址

// main.js 入口js文件
 import VueRouter from 'vue-router'
 import NProgress from 'nprogress'

Vue.use(VueRouter); //注冊(cè)路由插件
NProgress.configure({ showSpinner: false }); //進(jìn)度條配置

router.beforeEach((to, from, next) => {
  NProgress.start();
})
router.afterEach(transition => {
  NProgress.done();
});

2、路由攔截

router.beforeEach((to, from, next) => {
//假設(shè)登陸成功后，user信息保存在sessionStorage中。
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  //如果訪問(wèn)登錄頁(yè)，清空之前sessionStorage中的user信息
  }
  let user = JSON.parse(sessionStorage.getItem('user'));
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
//如果訪問(wèn)非登陸頁(yè)，判斷是否有保存的user信息，如果沒(méi)有，則判斷為非法訪問(wèn)，重定向到登錄頁(yè)面
})

3、路由切換動(dòng)效

<!--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: '數(shù)據(jù)中心',
     iconCls: 'iconfont icon-shuju', //假裝有個(gè)icon圖標(biāo)
     children: [
            { path: '/main/b', component: b, name: 'b' },
            { path: '/main/c', component: c, name: 'c' },
        ]
    },
]
export default routes;

//main.js 入口js文件
import routes from './routes

const router = new VueRouter({
  mode: 'history',
  routes
})
new Vue({
  el: '#app',
  template: '<App/>',
  router,
  components: { App }
}).$mount('#app')

ps：路由的配置，啟動(dòng)，掛載可以分別放在不同的頁(yè)面。將模塊化進(jìn)行到底。routes對(duì)象，甚至可以來(lái)自于vuex，便于管理數(shù)據(jù)。如下例子：

//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、全局過(guò)濾器
一個(gè)項(xiàng)目中，可能要用到很多過(guò)濾器來(lái)處理數(shù)據(jù)，多個(gè)組件公用的，可以注冊(cè)全局過(guò)濾器。單個(gè)組件使用的，就掛載到實(shí)例filters中。
項(xiàng)目做的多了以后，可以整理一套常用的filters，不用反復(fù)的寫(xiě)。比如：時(shí)間等各種操作，數(shù)據(jù)格式轉(zhuǎn)化，單位換算，部分?jǐn)?shù)據(jù)的md5加密等...

//filters.js 過(guò)濾器文件
export function formatDateTime (date) {
    //格式化時(shí)間戳
  var y = date.getFullYear()
  var m = date.getMonth() + 1
  m = m < 10 ? ('0' + m) : m
  var d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  var h = date.getHours()
  var minute = date.getMinutes()
  minute = minute < 10 ? ('0' + minute) : minute
  return 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攔截器
攔截器是全局的，攔截器可以在請(qǐng)求發(fā)送前和發(fā)送請(qǐng)求后做一些處理。
攔截器在一些場(chǎng)景下會(huì)非常有用，比如請(qǐng)求發(fā)送前在headers中設(shè)置access_token，或者在請(qǐng)求失敗時(shí)，提供通用的處理方式。

• axios實(shí)現(xiàn)-axios全攻略

// http request 攔截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
            config.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信息并跳轉(zhuǎn)到登錄頁(yè)面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的錯(cuò)誤信息
    });

• vue-resource實(shí)現(xiàn)-vue-resource全攻略

Vue.http.interceptors.push((request, next) => {
　console.log(this)//此處this為請(qǐng)求所在頁(yè)面的Vue實(shí)例
  // modify request
  request.method = 'POST';//在請(qǐng)求之前可以進(jìn)行一些預(yù)處理和配置
  // continue to next interceptor
　　next((response) => {//在響應(yīng)之后傳給then之前對(duì)response進(jìn)行修改和邏輯判斷。對(duì)于token時(shí)候已過(guò)期的判斷，就添加在此處，頁(yè)面中任何一次http請(qǐng)求都會(huì)先調(diào)用此處方法
    　response.body = '...';
　　　　return response;
  });
});

結(jié)尾：以上代碼片段，敬請(qǐng)補(bǔ)充，我會(huì)持續(xù)更新。后續(xù)會(huì)寫(xiě)一些簡(jiǎn)單的vue組件，插件實(shí)現(xiàn)。如果感興趣可以關(guān)注。