vue2.0ファミリーバケツプロジェクト実用コードフラグメント

前言:久しぶりにブログを更新しました.すでに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、ルート切替効果

  export default {
      name: 'app',
    components: {}
  }

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 './routes

const router = new VueRouter({
  mode: 'history',
  routes
})
new Vue({
  el: '#app',
  template: '',
  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、グローバルフィルタ1つのプロジェクトでは、多くのフィルタを使用してデータを処理する場合があります.複数のコンポーネントが共通で、グローバルフィルタを登録することができます.単一のコンポーネントで使用される場合は、インスタンスfiltersにマウントされます.プロジェクトが多くなったら、よく使うfiltersを整理して、繰り返し書かなくてもいいです.例えば、時間などの各種操作、データフォーマット変換、単位換算、一部のデータのmd 5暗号化など...

//filters.js      
export function formatDateTime (date) {
    //      
  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ブロッキングブロッキングはグローバルであり、ブロッキングは要求送信前と送信後にいくつかの処理を行うことができる.ブロッキングは、リクエスト送信前にheadersでaccess_を設定するなど、いくつかのシーンで非常に役立ちます.token、またはリクエストに失敗した場合、共通の処理方法を提供します.

axios実現-axios全攻略

// http request    
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  //       token，      ，   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          
                    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 request
  request.method = 'POST';//                 
  // continue to next interceptor
　　next((response) => {//       then   response         。  token        ，      ，       http           
    　response.body = '...';
　　　　return response;
  });
});

末尾:以上のコードクリップ、補足してください.更新を続けます.その後、簡単なvueコンポーネント、プラグイン実装が書かれます.興味があれば注目できる.