vue前端面试题总结

Posted 2021-03-10 qingsui

1.简述css中的盒子模型，标准盒子模型和IE盒子模型

  通常情况下，盒子模型指的是标准盒子模型：将元素实际占用的面积划分为：margin(外边距)+padding(内边距)+border(框)+content(内容)，其中内容占据的面积是实际占据的面积，内外边距和框是对内容修饰的累加的过程。

而IE中的盒子模型可以描述为：整个盒子占有的面积是一定的，其中内外边距、框、内容分别占用的比例需要划分。

 

2.vue中的路由拦截

项目中，有些页面需要用户登录后才能进入，例如，在某页面A ，用户操作前需要先进入登录页（此时需要将上一页的地址作为query存入login页面地址中），登录成功后再进入页面A。

  首先在路由字典中，给需要登录的路由中的meta添加属性:requireLogin:

const router = new Router({ 
  routes: [
    {
      path: ‘/login‘,
      name: ‘Login‘,
      component: Login,
      meta: {
        title: ‘登录页‘
      }
    },
    {
      path: ‘/register‘,
      name: ‘Register‘,
      component: Register,
      meta: {
        title: ‘注册页‘
      }
    },
    {
      path: ‘/‘,
      redirect: ‘/survey/start‘,
      name: ‘Full‘,
      component: Full,
      children: [
        {
          path: ‘/survey/start‘,
          name: ‘Home‘,
          component: Home,
          meta: {
            title: ‘首页‘,
            requireLogin: true
          }
        },
        {
          path: ‘/survey/report‘,
          name: ‘Report‘,
          component: Report,
          meta: {
            title: ‘详情页‘,
            requireLogin: true
          }
        }
      ]
    }
  ]
})

然后使用router.beforeEach注册一个全局前置守卫()

// 全局导航钩子
router.beforeEach((to, from, next) => {
  if (to.meta.title) { // 路由发生变化修改页面title
      document.title = to.meta.title
  }
  if (to.meta.requireLogin) {
    if (store.state.token) {
      if (Object.keys(from.query).length === 0) { // 判断路由来源是否有query，处理不是目的跳转的情况
        next()
      } else {
          let redirect = from.query.redirect // 如果来源路由有query
          if (to.path === redirect) { // 避免 next 无限循环
            next()
          } else {
            next({ path: redirect }) // 跳转到目的路由
          }
      }
    } else {
      next({
        path: ‘/login‘,
        query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
      next()
  }
})

内容借鉴地址：https://www.cnblogs.com/cckui/p/10319013.html

https://www.cnblogs.com/guoxianglei/p/7084506.html

 

3.sessionstorage，cookie，localstorage的区别

    localstorage相比较sessionstorage会永久存放在浏览器中，除非主动删除。

   sessionstorage存放的数据在关闭当前窗口之后就会被自动清除，存放在服务器上，不容易被窃取，但会占用一定的服务器资源。

   cookie是由服务器端发送给客户端的特殊信息，以文本形式存放在客户端，客户端每次向服务器端发送请求的时候，都会附带着部分内容。单个cookie保存的数据不能超过4k。cookie存放在客户端相对不太安全。

 

4.用户登录后的token存放在什么位置？

在用户初次登录之前需要在vuex中的state中初始化token，存放在state中的数据需要通过定义的方法进行修改，在mutations中定义获取和设置token的方法。

然后在登录接口处引入this.$store.comit("setToken",JSON.stringify(res.data.token))，将后台传来的token提交到vuex和localstorage中(因为vuex中的状态一旦刷新页面就不再存在了)，为保持当前状态，需要通过localstorage中提取状态再传值给vuex。

import Vue from ‘vue‘
import Vuex from ‘vuex‘
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    token:‘‘  //初始化token
  },
  mutations: {
    //存储token方法
    //设置token等于外部传递进来的值
    setToken(state, token) {
        state.token = token
        localStorage.token = token //同步存储token至localStorage
      },
  },
 getters : {
  //获取token方法
  //判断是否有token,如果没有重新赋值，返回给state的token
  getToken(state) {
    if (!state.token) {
      state.token = localStorage.getItem(‘token‘)
    }
    return state.token
    }
  },
  actions: {
 
  }
})

内容来源：https://blog.csdn.net/kevinfan2011/article/details/95166073

5.发送请求的请求头中包含哪些

accept,accept-encoding,accept-language,connection,host,referer,user-agent

6.vue-router实现路由懒加载

 路由懒加载是解决首页刷新慢的问题，使用懒加载可以将页面进行划分，在用户请求的时候加载该页面。

export default new Router({
   routes:[
      path:"/Login",
      name:"Login",
      component:resolve=>require([‘@component/Login‘],resolve) 
   ]
})