vue思考？

1.什么是动态组件？

让多个组件使用同一个挂载点，并动态切换，这就是动态组件

2.vue-router是什么？

这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

3.如何安装部署vue-router路由？

基础部署

1. 在main.js中载入路由

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

2. 接上代码，创建一个路由实例

const router = new VueRouter();

3. 接上代码，给实例配置路由规则

规则通常是写在下方数组内

import Home from './views/home'
import About from './views/about'
import Product from './views/product'
import Contact from './views/contact'
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/product', component: Product },
    { path: '/contact', component: Contact },
  ]
});

4. 将路由实例挂载vue根实例中

new Vue({
  render: h => h(App),
  router
})

5. vue-router提供了2个全局组件

• router-link：类似于超级链接a，但是比超级链功能要强
• router-view：路由和组件匹配成功后，那么组件的内容映射到那里？可以理解为默认插槽

4.什么是声明式路由和编程式路由？

声明式导航

<router-link to="/home"></router-link>

编程式导航

<template>
  <button @click="$router.push('/home')">联系页面</button>
</template>

或者

{
  methods: {

    checkLogo(){
      //假设条件为真，就跳转页面
      if(data.code==200){
        this.$router.push('/home')
      }
    }

  }
}

5.路由命名和别名的用途？

命名路由，就是给路由规则取一个名字

var router = new VueRouter({
  routes: [
    { path: '', redirect: { name: 'home' }  },
    { name: 'home', path: '/home', component: Home }
  ]
})

路由别名，就是给路由取一个简短的名称，方便引用的不需要写过长的路径

var router = new VueRouter({
  routes: [
    { path: '', redirect: '/shouye' },
    { alias: '/shouye', path: '/home', component: Home }
  ]
})

6.如何配置动态路由？params和query传参的区别

param形式传参

一、在视图层传入实际参数值

<router-link to="/product/10/蔬菜水果">产品中心</router-link>

以上实际传入2个参数，分部是 10 和 蔬菜水果

二、在路由中配置路由映射规则，冒号表示后面的值为变量

var router = new VueRouter({
  routes: [
    { path:'/product/:id/:name', component: Product }
  ]
})

三、在匹配到的组件（Product）中，接收来自地址栏中传来的参数

Product.vue配置如下

<template>
  <div class="product">
    {{$route.params.id}} --- {{$route.params.name}} 
  </div>
</template>

query形式传参

一、在视图层传入实际参数值

<router-link to="/product?id=10&name=蔬菜水果">产品中心</router-link>

二、在匹配到的组件（Product）中，接收来自地址栏中传来的参数

Product.vue配置如下

<template>
  <div class="product">
    {{$route.query.id}} --- {{$route.query.name}} 
  </div>
</template>

7.路由规则中的重定向redirect有什么作用？

1.重定向的地址不需要接收参数

const routes = [
    { path: '/', redirect: '/index'},
    { path: '/index', component: index }
]

2.重定向的地址需要接收参数然而没有传参

不会改变地址，页面不会报错但是也不会显示内容
{
  path:'goParams',
  redirect:'/params/:newsId(\\d+)/:newName'
}
<router-link to="/goParams" >goParams页面</router-link>

3.重定向的地址需要接收参数并且传参

{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

8.如何配置嵌套路由？

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

				/user/foo/profile                     /user/foo/posts
				+------------------+                  +-----------------+
				| User             |                  | User            |
				| +--------------+ |                  | +-------------+ |
				| | Profile      | |  +------------>  | | Posts       | |
				| |              | |                  | |             | |
				| +--------------+ |                  | +-------------+ |
				+------------------+                  +-----------------+

借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
接着上节创建的 app：

<div id="app">
  <router-view></router-view>
</div>
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

这里的 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 。例如，在 User 组件的模板添加一个 ：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  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
        }
      ]
    }
  ]
})

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

9.keep-live 的作用？

1.Http底层也是通过TCP传输的。

2.HTTP keep-alive

Http是一个”请求-响应”协议，它的keep-alive主要是为了让多个http请求共享一个Tcp连接，以避免每个Http又新建一个TCP连接。每个Http服务器默认的keep-alive时间可能是不一样的。

3.直接介绍一个场景就可能更容易明白了。客户端发送了一个Http请求，服务器响应后，判断这个Http是否是keep-alive模式的，如果不是则关闭连接,如果是keep-alive，则等待keep-alive time后再关闭，如果这期间再收到一个http 请求，则继续等待最后一个请求的keep-alive time时间，直到keep-alive time时间内没有收到请求，则关闭。

4.上面是HTTP keep-alive的，而TCP是它下一层的协议，本身TCP是长连接的，除非主动关闭。HTTP的keep-alive time一般是15ms, 30ms之类的，如果是超过了HTTP的keep-alive time时间，则HTTP会关闭TCP连接。本身TCP是不会关闭连接的，TCP的keep alive是TCP的保鲜装置，在keep alive timeout后服务端发送一个监测包来判断连接是否仍保持着，如果还是可连接，则继续保持，它不会主动关闭连接的。而心跳包是为了防止NAT超时。