2022前端面试题

目录

1 == 和===区别 

2 $router和$route区别?

3 什么是promise？

4 什么是嵌套路由？

---

1 == 和===区别 

        ===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；

==： 为等值符 当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类 型相同的值，再进行比较；

2 $router和$route区别?

            $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

                

**1.$route.path**
      字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
**2.$route.params**
      一个 key/value 对象，包含了 动态片段 和 全匹配片段，
      如果没有路由参数，就是一个空对象。
**3.$route.query**
      一个 key/value 对象，表示 URL 查询参数。
      例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
      如果没有查询参数，则是个空对象。
**4.$route.hash**
      当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
**5.$route.fullPath**
      完成解析后的 URL，包含查询参数和 hash 的完整路径。
**6.$route.matched**
      数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name    当前路径名字**
**8.$route.meta  路由元信息

 $router对象是全局路由的实例，是router构造方法的实例。 

             push

// 字符串
      this.$router.push('home')
// 对象
      this.$router.push({ path: 'home' })
// 命名的路由
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
      this.$router.push({ path: 'register', query: { plan: '123' }})

                go

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

                replace

//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
05

// 一般使用replace来做404页面
this.$router.replace('/')

配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径，就不会一直嵌套之前的路径。

3 什么是promise？

     在Promise的内部，有一个状态管理器的存在，有三种状态：pending、fulfilled、rejected。　　　　
(1) promise 对象初始化状态为 pending。　　　　
(2) 当调用resolve(成功)，会由pending => fulfilled。　then        　　　
(3) 当调用reject(失败)，会由pending => rejected。　　

01示例 

getData()
.then(a => getMoreData(a))
.then(b => console.log(b));

• 2 promise 可以实现在多个请求发送完成后 再得到或者处理某个结果

• 构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
  Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
  当状态变为resolve时便不能再变为reject，反之同理。
  

  注：

是一个异步函数的解决方案，主要是为了解决回调地狱的问题（函数里边调用函数，从而形成多层嵌套，导致代码的可读性和维护性变差）；promise本身是一个函数，自身有resolve ，reject ，all,三种方法；原型里边有then（），catch（）两种方法

4 什么是嵌套路由？

要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

重定向和别名

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

路由守卫 是什么

简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。导航守卫分为：全局的、组件内的、单个路由独享三种

1.1 全局的

指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
// ...
})

全局路由的钩子函数包括

• beforeEach
  在路由跳转前触发，参数包括to,from,next（参数会单独介绍）三个，这个钩子作用主要是用于登录验证
• beforeResolve（2.5+）
  这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，与beforeEach的区别参考官网。
• afterEach
• 是在路由跳转完成后触发，参数包括to,from，它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。

• 路由守卫回调参数

• to：目标路由对象；

• from：即将要离开的路由对象；

• next：他是最重要的一个参数，他相当于佛珠的线，把一个一个珠子逐个串起来。

 

Vue的路由实现

Vue的路由实现，hash模式 和 history模式

1.1 、hash模式

是什么？
在浏览器链接中符号“#”后面的字符称之为hash，用window.location.hash读取；

特点
hash虽然在URL中，但不被包括在HTTP请求中；
仅用来指导浏览器动作，对服务端安全无害，
hash不会重新加载页面。

1.2 、history模式

是什么？
history模式是采用HTML5的新特性；且提供了两个新方法：pushState()、replaceState() 可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

特点
history 模式下，前端的 URL 被包括在HTTP请求中，如 http://www.xxx.com/items/id。
如果后端有对请求接口的地址进行管理，同时缺少对其相应路由的处理的话，那就将返回 404 错误。（也就是说，后台处理某个接口只能针对某个页面链接请求，其它页面请求该接口将无法请求通）

路由之间跳转方式

• 1.1、直接修改地址栏中的路由地址
• 1.2、通过router-link实现跳

 <router-link to="/myRegister">注册</router-link>

通过导航钩子中的next方法修改跳转地址 

beforeRouteEnter (to, from, next) {
      next('/login')
 }   

 

动态路由配制 以及 动态参数的获取

1.1 动态路由配制

在router目录下的index.js文件中，对path属性中需要动态配制地地方前面加上：

  routes: [
    {
      path: '/foo/:id',
      component: Foo
    }
 ]   

 动态参数的获取

this.$route.params   //params对象是所有传递过来的参数

router-link 路由传递参数

1 query传参

 //query传参
 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>    

//获取参数
this.$route.query

2.params传参

//动态路由 router/index.js
routes: [
    {
      path: '/test/:id',
      component: Foo
    }
 ]   

// id 是路由配制的动态参数
<router-link :to="'/test/'+id">跳转</router-link>

//获取方法
this.$route.params