标签：ora div css span 一个 无限 盒子模型 referer 文本
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) ] })
标签：ora div css span 一个 无限 盒子模型 referer 文本
原文地址：https://www.cnblogs.com/qingsui/p/mianshiti.html
