2020年5-6月前端面试题汇总（一）

• 1、url输入到页面显示全过程

我们现在上网过程中，常常会在浏览器中输入各种各样的URL或者网址，然后浏览器就会渲染出对应的网页。这里到底是怎么实现的呢，中间包含的过程又有哪些呢。让我们来一一分析。 

1、输入网址

2、DNS解析 DNS（Domain Name System，域名系统）相当于一个电话本

3、建立tcp连接（三次握手）

4、客户端发送HTPP请求

5、服务器处理请求　

6、服务器响应请求

7、浏览器展示HTML

8、浏览器发送请求获取其他在HTML中的资源。

• 2、vuex包括哪些内容
• 3、computed和watch区别

watch监听某一个值，当被监听的值发生变化时，执行对应的操作
(与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结

• 4、vue-router 钩子函数

1、全局的钩子

beforeEach（to，from，next）
afterEach（to，from，next）

2、组建内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

methods: {},
beforeRouteLeave (to, from, next) {}

需要注意是：

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

beforeRouteEnter获取到this实例

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

最后是完整的导航解析流程：

1、导航被触发
2、在失活的组件里调用离开守卫
3、调用全局的 beforeEach 守卫
4、在重用的组件里调用 beforeRouteUpdate 守卫
5、在路由配置里调用 beforEnter
6、解析异步路由组件
7、在被激活的组件里调用 beforeRouteEnter
8、调用全局的 beforeResolve 守卫
9、导航被确认
10、调用全局的 afterEach 钩子
11、触发 DOM 更新
12、在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

---

路由拦截登录例子

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const router = new Router({
 routes: [
 {
  path: '/',
  /*
  * 按需加载 
  */
  component: (resolve) => {
  require(['../components/Home'], resolve)
  }
 }, {
  path: '/record',
  name: 'record',
  component: (resolve) => {
  require(['../components/Record'], resolve)
  }
 }, {
  path: '/Register',
  name: 'Register',
  component: (resolve) => {
  require(['../components/Register'], resolve)
  }
 }, {
  path: '/Luck',
  name: 'Luck', 
  // 需要登录才能进入的页面可以增加一个meta属性
  meta: { 
  requireAuth: true
  },
  component: (resolve) => {
  require(['../components/luck28/Luck'], resolve)
  }
 }
 ]
})
// 判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
 if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
 if (localStorage.getItem('username')) {// 判断是否登录
  next()
 } else {// 没登录则跳转到登录界面
  next({
  path: '/Register',
  query: {redirect: to.fullPath}
  })
 }
 } else {
 next()
 }
})
 
export default router

当router的mode为history时，去掉#

router.beforeEach((route, redirect, next) => {
  let title = route.meta.title
  document.title = title || ''
  console.log(route.hash)
  if (route.hash !== '') {
    const id = route.hash.replace('#', '')
    const element = document.getElementById(id)
    if (element) element.scrollIntoView()
  }
  if (route.path !== '/') {
    indexScrollTop = document.body.scrollTop
  }
  next()
})
router.afterEach((route, redirect) => {
  if (route.hash !== '') {
    const id = route.hash.replace('#', '')
    const element = document.getElementById(id)
    if (element) element.scrollIntoView()
  }
  if (route.path !== '/') {
    document.body.scrollTop = 0
  } else {
    Vue.nextTick(() => {
      document.body.scrollTop = indexScrollTop
    })
  }
})

这样就做好了登录拦截.我们只需在main.js中引入router就可以了.

5、vue-router懒加载实现

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })