一. 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的封装过程