用vue寫項目main.js 中的一些設置


import Vue from 'vue';
import $ from 'webpack-zepto';
import VueRouter from 'vue-router';
import filters from './filters';
import routes from './routers';
import Alert from './libs/alert';
import store from './vuex/user';
import FastClick from 'fastclick';
Vue.use(VueRouter);
Vue.use(Alert);

  routes ,Vue, VueRouter,store  都是跟vue vuex 和vuerouter 有關的 $是為了進行類似jquery的操作引進的庫  FastClick解決移動端點擊300ms延遲的問題  直接FastClick.attach(document.body)   alert是當有error時電腦彈出的信息的設置 

const router = new VueRouter({
    mode: 'history',
    routes
})
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => {
    return record.meta.requiresAuth
  }) {
      if (store.state.userInfo.userId) {
        next()
      } else {
        next({
         path: '/login',
         query: {redirect: to.fullpath}
        })
       }
    }else {
     next()
    }
})

  router的初始化 mode為history 當路徑改變時不會重新加載    router.beforeEach((to, from, next) {})實現的邏輯是 當record.meta.requiresAuth為true時 如果已經登陸 直接next() 

如果沒登陸 去登陸頁面  為false時直接登陸

// 如果sessionStorage 儲存了user 則通過vuex 賦值給userInfo
if (window.sessionStorage.user) {
    store.dispatch('setUserInfo', JSON.parse(window.sessionStorage.user));
}

  利用sessionStorage存儲登陸信息 通過store執行setUserInfo action 分發用戶信息  

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM