介绍

vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 具体内容请前往vue官网查看：VUE

个人理解

vue的数据属于双向数据绑定，与react的单向数据流不同，在学习或者复习vue的过程中，一定要切记：不要在想着怎么操作DOM，而是想着如何操作数据，因为vue中的数据在发生改变时页面数据也会进行相对应的更新，这就是双向数据绑定，我将它理解为“热更新”，

初步介绍

上图中红色箭头所指的App.vue文件则是一开始我们的根文件，从这里开始我们需要写自己的项目，内容如下：

<template>
  <div id="app">
    <router-view/><!-- 页面出口 -->
  </div>
</template>

<style lang="less">
html,body,#app {
  width: 100%;
  height: 100%;
}
</style>

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件， 很多时候，每个路由的数据都是包含在路由参数中。

因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>：

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

路由

路由是我们在编写项目时必不可少的，通过路由我们才能进行页面的跳转，在我们创建vue项目的时候，我们需要勾选上vue-route的组件：如下图：

在创建好项目后，路由配置文件在src文件夹下的router文件夹里，如下图：

首先介绍一级路由：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/zy',
    name: 'zy',
    component: () => import('../views/zy.vue')
  }
]

由以上代码可以看出一级路由都是平级关系（兄弟关系）

而二级路由则有些许不同：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    redirect:'/index',
    children:[
      {
        path: '/index',
        name: 'index',
        component: () => import('../views/child/index.vue')
      },
      {
        path: '/sou',
        name: 'sou',
        component: () => import('../views/child/sou.vue')
      },
      {
        path: '/car',
        name: 'car',
        component: () => import('../views/child/car.vue')
      },
      {
        path: '/my',
        name: 'my',
        component: () => import('../views/child/my.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/zy',
    name: 'zy',
    component: () => import('../views/zy.vue')
  }
]

可以看出，我们在home一级路由里创建了一个children数组，里面则是他的子级路由，所以当我们在home页面中可以匹配到他的子级路由，在自己页面中进行局部内容的切换，效果和选项卡相似，但是根本上是不同的，因为他进行了路径的跳转。 效果如下：