1. Vue的生命周期 - 创建和销毁的时候可以做一些我们自己的事情 - beforeCreated - created - beforeMount - mounted - beforeUpdate - updated - activated - deactivated - beforeDestroy - destroyed 1.1 知识点回顾 1.1.1 beforeCreated 在实例创建之前除标签外，所有的vue实例需要的数据，事件都不存在 1.1.2 created 实例被我创建之后，data和事件已经被解析到，el还没有解析到 1.1.3 beforeMount 开始找标签，数据还没被渲染，事件也没被监听 1.1.4 mounted 开始渲染数据和监听事件 1.1.5 beforeUpdate 数据已经被修改在虚拟DOM，但是还没渲染到页面上 1.1.6 updated 开始使用Diff算法，将虚拟DOM中的要修改数据应用到页面上，真实DOM中的数据也被修改了 1.1.7 beforeDestroy 所有的数据都存在 1.1.8 destroyed 所有的数据都存在(在虚拟DOM中) 1.1.9Vue提供的用来缓存消除的标签 - activated和deactivated取代了beforeDestroy和destroyed的执行
2. Vue的路由系统 2.1 VueRouter的实现原理 - 通过监听a的锚点值，来动态的显示页面内容 2.2 VueRouter的安装使用 2.2.1 第一步：
1 Vue.use(VueRouter)
2.2.2 第二步：创建router对象和每个url对应的组件
1 let Home = { 2 template:``, 3 }; 4 5 let Login = { 6 template:``, 7 }; 8 9 let router = new VueRouter({10 routes:[11 {12 name:'home',13 path:'/',14 components:Home',15 },16 {17 name:'login',18 path:'/login',19 components:Login,20 },21 ]22 }); 2.2.3 第三步：注册router对象到根实例中
1 new Vue({2 el:'#app',3 template:` 2.2.4 第四步：
1 let App = {2 template:`3 首页 4 登录 5 6 2.3 VueRouter之命名路由 同上 2.4 VueRouter之路由参数 - user_change/1/ - user_detail/?user_id=1
1 let Home = { 2 template:` 3 欢迎
4 ` 5 }; 6 7 let UserDetail = { 8 template:` 9 用户详情
10 `,11 };12 13 let UserChange = {14 template:`15 修改用户信息
16 `,17 };18 19 let App = {20 template:`21 22 首页 23 用户详情 24 修改用户信息 25 2.5 VueRouter之路由参数的实现原理
1 this.$router.params2 this.$router.query
2.6 VueRouter之子路由
1 let Home = { 2 template: ` 3 4 欢迎
5 6 ` 7 }; 8 9 let Phone = {10 template: `11 12 手机品牌
13 华为 14 一加 15 16 华为手机
24 25 `,26 };27 let OnePlus = {28 template: `29 30 一加手机
31 32 `,33 34 let App = {35 template: `36 37 首页 38 手机品牌 39 40 2.7 VueRouter之子路由重定向
1 let router = new VueRouter({ 2 routes: [ 3 { 4 name: 'home', 5 path: '/', 6 component: Home, 7 }, 8 { 9 name: 'login',10 path: '/login',11 component: Login12 },13 {14 name: 'pay',15 path: '/pay',16 redirect: '/login',17 component: Pay,18 },19 ]20 }); 2.8 VueRouter之子路由的钩子函数
1 let router = new VueRouter({ 2 routes: [ 3 { 4 name: 'home', 5 path: '/', 6 component: Home, 7 }, 8 { 9 name: 'login',10 path: '/login',11 component: Login12 },13 {14 name: 'pay',15 path: '/pay',16 meta: { required_login: true },17 component: Pay,18 },19 ]20 });21 22 // 通过router对象的beforeEach(function(to, from, next))23 router.beforeEach(function (to, from, next) {24 console.log("to: ", to);25 console.log("from: ", from);26 console.log("next: ", next);27 if ( to.meta.required_login ) {28 next('/login');29 } else {30 next();31 }32 }); 2.9 VueRouter之子路由的去 # 号
1 let router = new VueRouter({ 2 mode:'history', 3 routes: [ 4 { 5 name: 'home', 6 path: '/', 7 component: Home, 8 }, 9 {10 name: 'login',11 path: '/login',12 component: Login13 },14 {15 name: 'pay',16 path: '/pay',17 component: Pay,18 },19 ]20 });