一路繁花似锦绣前程
失败的越多,成功才越有价值

导航

 

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

<!--禁止页面缩放-->
<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

 

posted on 2020-07-10 21:45  一路繁花似锦绣前程  阅读(487)  评论(0编辑  收藏  举报