Vue 生命周期与路由详解-CSDN博客

本文链接：https://blog.csdn.net/qq_40289624/article/details/109149359

本文详细介绍了 Vue.js 的生命周期流程，从实例化到销毁的全过程，并解析了 Vue Router 的使用方法，包括配置路由规则、编程式导航及 Hash 和 history 模式的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

## Vue 生命周期

1） new Vue()

2）初始化（事件，生命周期） => h函数

3） beforeCreate

4）初始化（注入，校验）

5） created

6）是否指定 el 选项 => 没设定的话调用 vm.$mounted(el) 函数

=> 设定的话是否指定 template

7） template => 指定了就讲 template 编译到 render 函数中

=> 没设定就将 el的外部HTML作为 template 编译

8） beforeMount

9）创建 vm.$el 并用其替换 "el"

10）mounted

11）挂载完毕

12）当data被修改时，虚拟DOM重新渲染并更新应用beforeUpdate，Updated

13）当调用 vm.$destory() 函数时

14）beforeDestroy

15）解除绑定销毁子组件及事件监听

16）destoryed

17）销毁完毕

## Vue 语法和概念

- 差值表达式 {{}}

- 指令（14 个）

- 计算属性和侦听器

- Class 和 Style 绑定

- 条件渲染 / 列表渲染

- 表单输入绑定

- 组件

- 插槽

- 插件

- 混入 mixin

- 深入响应式原理

- 不同构建版本的 Vue

## Vue Router 回顾

- 注册路由插件 Vue.use(VueRouter)

- 路由规则

  const routes = [

  {

  path: '/detail/:id',

  name: 'Detail',

  // 开启 props，会把 URL 中的参数传递给组件

  // 在组件中通过 props 来接收 URL 参数

  props: true,

  component: () => import(/_ webpackChunkName: "detail" _/ '../views/Detail.vue')

  },

  export default {

  name: 'Detail',

  props: ['id']

  }

- 嵌套路由

  {

    path: '/',

    component: Layout,

    children: [

      {

        name: 'index',

        path: '',

        component: Index

      },

      {

        name: 'detail',

        path: 'detail/:id',

        props: true,

        component: () => import('@/views/Detail.vue')

      }

    ]

  }

- 编程式导航

this.$router.push("/");

this.$router.push({name:name});

this.$router.replace("/");不会记入历史

this.$router.go(-1) == this.$router.back();

- Hash 模式与 history 模式的区别

1） HASH模式是基于锚点，以及onhashchange事件

2） histroy模式是基于HTML5中的History API（有兼容性问题）

- history.pushState()

- history.replaceState()