vue2.0的項目非常實用的代碼集合

// 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();
});

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信息，如果沒有，則判斷為非法訪問，重定向到登錄頁面})

<!--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>

//router.jsimport 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: '<App/>',
 router,
 components: { App }
}).$mount('#app')

//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()
 ]
})

//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])
})

// 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.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;
 });
});