移动端页面开发前准备工作+vue添加动态路由+store刷新

一、移动端页面开发前准备工作

<!--禁止页面缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

html{
    font-size: 100px;
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    font-size: 0.16rem;
}

 二、添加动态路由

1、登录成功需添加路由（在登录页处添加）

routerjson.map(li => {
  let component = li.component
  // li.component = () => import("../pages/" + component)
  li.component = (resolve) => require([`../pages/${component}`], resolve)
})
window.sessionStorage.setItem("token", "value")
this.$router.addRoutes(routerjson)

2、刷新页面需添加路由（在路由配置文件处添加）

if (window.sessionStorage.getItem("token")) {
  routerjson.map(li => {
    let component = li.component
    // li.component = () => import("../pages/" + component)
    li.component = (resolve) => require([`../pages/${component}`], resolve)
  })
  router.addRoutes(routerjson)
}

注意：routerjson为异步请求所得到的路由配置数据

 三、store刷新

1、登录成功需设置数据

2、刷新页面需设置数据

import Vue from 'vue'
import Router from 'vue-router'
import p1 from '../pages/p1'
import routerjson from "../utils/routejson";
import storejson from "../utils/storejson";
import store from "../store";

Vue.use(Router)

const router = new Router({
  routes: [{
    path: '/',
    redirect: "/p1"
  }, {
    name: 'p1',
    path: '/p1',
    component: p1
  }]
})

if (window.sessionStorage.getItem("token")) {
  setTimeout(function () {//模拟异步请求
    routerjson.map(li => {
      let component = li.component
      // li.component = () => import("../pages/" + component)
      li.component = (resolve) => require([`../pages/${component}`], resolve)
    })
    router.addRoutes(routerjson)
  }, 5000)
}

router.beforeEach(async (to, from, next) => {
  if (window.sessionStorage.getItem("token")) {
    await new Promise(resolve => {//模拟异步请求
      setTimeout(function () {
        store.commit("setStorejson", storejson)
        resolve()
      }, 3000)
    })
  }

  next()
})

export default router

 四、请求失败返回登录页

import Vue from "vue"
import Axios from "axios"
import router from "../router"

// Axios.defaults.baseURL="http://www.baidu.com"

Axios.interceptors.request.use(req => {
    return req;
}, err => {
    return Promise.reject(err);
})

Axios.interceptors.response.use(res => {
    if (res.data.code) {
        if (router.history.current.path != "/a1") {
            router.push({name: "a1"})
        }
    }

    return res;
}, err => {
    if (router.history.current.path != "/a1") {
        router.push({name: "a1"})
    }

    return Promise.reject(err);
})

Vue.prototype.$axios = Axios