vue学习笔记总结（二）

一. Vue Cli

1.1 runtime-compiler和runtime-only的区别

ESLint是模版规范

runtime-compiler从 template -> ast-> rander-> vdom-> 真实dom

runtime-only从 rander-> vdom ->dom

1.2 VueCLI3

1.如何创建项目 vue create project

2.CLI3的目录结构

3.配置文件：1.vue ui查看 2.隐藏的配置文件 3.自定义vue.config文件

二.vue-Router

2.1 什么是前端路由

前端路由不同于传统路由，它不需要服务器来进行解析，而是通过一个hash函数或者H5提供的history API来实现。

前后端分离：后端通过API文档将数据交给前端，前端通过AJAX将数据接收并通过js进行渲染

SPA前端路由

2.2 路由的基本配置

安装vue-router

Vue.use ->创建VueRouter对象 -> 挂载到Vue实例上

配置映射关系：1.创建组件 2.配置映射关系 3.使用router-link/router-view

2.3 细节处理

默认路由，重定向：redirect

mode：history 

图片懒加载 

const Home = () => import('../views/home/Home')

router-link ->tag（渲染类型） -> replace -> active-class

2.4 动态路由

/user/:id

query传递对象

/this.$route.params.id （显示）

2.5 两种参数的传递

params

query 传递对象  -> URL

URL 

协议：//主机端口/路劲?查询

2.6 路由嵌套

children:[ ] 

2.7 导航守卫（离开页面前/后提醒用户）

全局导航守卫

const routes = [
  { 
    path: '',
    redirect: 'home' //重定向
   },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '文档'
    },
  }
]
router.beforeEach((to, from, next) => {
   /* must call `next` */
   document.title = to.matched[0].meta.title;
   next()
 });

路由导航守卫

组件类守卫

2.8 Keep-alive

缓存数据，不会直接被清除

2.9TabBar的封装过程