如何基于vue-cli3.0构建功能完善的移动端架子

<!-- built files will be auto injected -->
</body>

</html>

路由设计、登录拦截

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        auth: false, // 是否需要登录
        keepAlive: true // 是否缓存组件
      }
    },
    {
      path: '/about',
      name: 'about',
      component: () =>
        import(/* webpackChunkName: "about" */ './views/About.vue'),
      meta: {
        auth: true,
        keepAlive: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () =>
        import(/* webpackChunkName: "login" */ './views/login.vue'),
      meta: {
        auth: false,
        keepAlive: true
      }
    },
    {
      path: '*', // 未匹配到路由时重定向
      redirect: '/',
      meta: {
        // auth: true,
        // keepAlive: true
      }
    }
  ]})
// 全局路由钩子函数 对全局有效
router.beforeEach((to, from, next) => {
  let auth = to.meta.auth
  let token = store.getters['login/token'];
  if (auth) { // 需要登录
    if (token) {
      next()
    } else {
      next({
        name: 'login',
        query: {
          redirect: to.path
        }
      })
    }
  } else {
    next()
  }
})

在meta中设置是否需要登录以及是否缓存当前组件，

在router.beforeEac路由钩子函数中对登录权限判断，没有登录的跳到登录页面，并且把当前页面传过去，登录后跳回这个页面。

对于页面缓存的在app.vue里进行处理

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

axios、api 设计

对于axios的设计主要是请求拦截器， respone拦截器，以及get,post的二次封装

axios.defaults.timeout = 12000 // 请求超时时间
axios.defaults.baseURL = process.env.VUE_APP_BASE_API
axios.defaults.headers.post['Content-Type'] =
  'application/x-www-form-urlencoded;charset=UTF-8' // post请求头的设置
// axios 请求拦截器
axios.interceptors.request.use(
  config => {
    // 可在此设置要发送的token
    let token = store.getters['login/token'];
    token && (config.headers.token = token)
    Indicator.open('数据加载中')
    return config
  },
  error => {
    return Promise.error(error)								 
 4/7   首页 上一页 2 3 4 5 6 7 下一页 尾页