大前端 - vue - 基础回顾 + Vue-Router使用 + 路由守卫

代码地址：

一： 基础回顾

1.1vuejs基础结构

h：方法是创建虚拟dom
render：方法把创建的虚拟dom返回
$mount：把虚拟dom转换为真实dom，渲染到浏览器

1.2 vue声明周期

生命周期：

1. 创建阶段：
   在创建vue实例的过程会发生很多事情，首先会进行初始化，初始化事件，生命周期相关的成员，包括我们的h函数都是在这个位置初始化的，接下来，会触发生命周期中的beforeCreate钩子函数，beforeCreate执行完毕之后，会执行初始化注入的操作，会把props，data，methods，等等注入到vue的实例上，然后会触发created钩子函数，因为刚刚已经初始化了props，data，methods, 那么这个时候在created就可以访问到他们了。到此vue实例初始化完毕。

2. 把模版编译成render函数：
   接下来：帮我们把模版编译成render函数，首先判断选项中是否设置了el选项，如果没有设置就调用$mount这个方法（帮助我们把el转换成template），接着判断是否设置了template模版，如果没有设置会把el元素的外部的html作为template编译，如果设置了模版，将template编译到render函数中，渲染函数是用来生成虚拟dom的。

3. 准备挂载dom：
   首先会触发beforMount这个钩子函数，也就是挂载之前所执行的钩子函数，在这个函数中我们无法获取新元素的内容，接着，准备，挂载dom，把新的元素挂载到页面上，然后再触发mounted钩子函数，在这个钩子函数中我们可以访问到新的dom元素，

4. 挂载完成：
   当修改data中的成员时，首先会触发beforupdate钩子函数，然后再进行新旧2个虚拟dom对比，然后把差异重新渲染到浏览器中，最后触发updated钩子函数，在beforupdate钩子函数中，如果直接访问浏览器中的内容，还是上一次的结果，我们想要获取页面的最新结果，应该在updated钩子函数中访问。

5. 销毁：
   当我们调用vm.destroy这个钩子函数时，首先会触发beforeDestroy这个钩子函数，然后执行一些清理的工作，最后再出发destroy钩子函数执行清理的工作。

如果使用单文件编译组件，模版编译是在打包或者构建的时候完成，不在运行的时候处理模版编译的工作。

vue一直鼓励我们提前编译好模版，这样性能比较好，我们不需要在运行的时候编译模版。

1.2 vue语法和概念

1. 差值表达式
2. 指令:
3. 计算属性和侦听器
4. class 和style
5. 条件渲染和列表渲染
6. 表单输入绑定
7. 组件 ：可复用的html实例
8. 插槽：在定义组件中挖坑，在使用的时候填坑
9. 插件： vuex，vue-router
10. 混入mixin
11. 深入响应式原理
12. 不同构建版本的vue

二： Vue-Router 使用

Vue-Router 使用

2.1vue-router基础回顾

使用步骤：

1. 创建 router 对象，router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
// 1. 注册路由插件
Vue.use(VueRouter)

// 路由规则
const routes = [
  {
   
    path: '/',
    name: 'Index',
    component: Index
  },
  {
   
    path: '/blog',
    name: 'Blog',
    component: () => import(/* webpackChunkName: "blog" */ '../views/Blog.vue')
  },
  {
   
    path: '/photo',
    name: 'Photo',
    component: () => import(/* webpackChunkName: "photo" */ '../views/Photo.vue')
  }
]
// 2. 创建 router 对象
const router = new VueRouter({
   
  routes
})

export default router

2. 注册 router 对象，main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
   
  // 3. 注册 router 对象
  router,
  render: h => h(App)
}