<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

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

        來源:懂視網 責編:小采 時間:2020-11-27 20:01:36
        文檔

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

        vue2.0的項目非常實用的代碼集合:這次給大家帶來vue2.0的項目非常實用的代碼集合,在項目中使用vue2.0的代碼注意事項有哪些,下面就是實戰案例,一起來看一下。1、全局增加進度條提示nprogress地址// main.js 入口js文件 import VueRouter from 'vue-router
        推薦度:
        導讀vue2.0的項目非常實用的代碼集合:這次給大家帶來vue2.0的項目非常實用的代碼集合,在項目中使用vue2.0的代碼注意事項有哪些,下面就是實戰案例,一起來看一下。1、全局增加進度條提示nprogress地址// main.js 入口js文件 import VueRouter from 'vue-router

        這次給大家帶來vue2.0的項目非常實用的代碼集合,在項目中使用vue2.0的代碼注意事項有哪些,下面就是實戰案例,一起來看一下。

        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.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')

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

        相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

        相關閱讀:

        不同版本的vscdoe如何調試不同版本nodejs

        Vue.js的2.0后臺系統實戰案例

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

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

        vue2.0的項目非常實用的代碼集合:這次給大家帶來vue2.0的項目非常實用的代碼集合,在項目中使用vue2.0的代碼注意事項有哪些,下面就是實戰案例,一起來看一下。1、全局增加進度條提示nprogress地址// main.js 入口js文件 import VueRouter from 'vue-router
        推薦度:
        標簽: VUE 代碼 的項目
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲一区二区三区深夜天堂| 动漫黄网站免费永久在线观看| 亚洲系列中文字幕| 国产精品美女久久久免费| 成全视频免费观看在线看| 亚洲国产综合无码一区二区二三区| 亚洲色成人网站WWW永久四虎| 特a级免费高清黄色片| 午夜亚洲国产成人不卡在线 | 久久精品亚洲精品国产色婷| 亚洲黄色免费电影| 久久久精品2019免费观看| 亚洲毛片av日韩av无码| 四虎永久在线精品免费一区二区 | 国产精品亚洲二区在线| 亚洲国产香蕉人人爽成AV片久久| 美女免费精品高清毛片在线视| 99re免费在线视频| 久久精品国产亚洲AV不卡| 一级特黄录像免费播放肥| 久久久久久亚洲精品| 在线观看永久免费| 亚洲国产精品无码第一区二区三区| 国产特黄特色的大片观看免费视频 | 国产成人免费片在线观看| 男人j进女人p免费视频| 国产亚洲成AV人片在线观黄桃| 国产成人AV片无码免费| 亚洲AV无码乱码麻豆精品国产| 成人免费在线观看网站| 亚洲欧洲一区二区| 国内免费高清在线观看| 亚洲系列中文字幕| 国产午夜免费秋霞影院| 亚洲人xxx日本人18| 亚洲?V乱码久久精品蜜桃| 国产免费AV片在线观看| 最新亚洲卡一卡二卡三新区| 1000部羞羞禁止免费观看视频| 亚洲午夜精品一区二区麻豆| 亚洲综合色视频在线观看|