Vue: 生命周期, VueRouter

Vue实例的生命周期:

beforeCreate:  

　　实例创建之前除标签外，所有的vue实例需要的数据，事件都不存在

created: 

　　实例被创建之后，data和事件已经被解析到，el还没有找到

beforeMount:

开始找标签，数据还没有被渲染，事件也没有被监听

mounted: 

开始渲染数据，开始监听事件

beforeUpdat:

数据已经被修改在虚拟DOM，但是没有被渲染到页面上

updated:

开始使用Diff算法，将虚拟DOM中的修改应用到页面上，此时真实DOM中的数据被修改了

beforeDestroy:

所有的数据都存在

destroy:

所有的数据都有（虚拟DOM中找的）

<keep-alive></keep-alive> Vue提供的用来缓存被消除的标签

用activated和deactivated取代了beforeDestroy和destroyed的执行

 

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

 

 

• 第一步, 在根实例中使用，
• 第二步, 实例化一个router对象,本质上是将路径和页面内容绑定了对应关系
• 第三步, 在根实例中注册router对象
• 第四步, router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
• 第五步, router-view是页面内容的渲染出口

 

 

• 2.1 VueRouter的实现原理

• <script>
          let oDiv = document.getElementById("app");
  
          window.onhashchange = function () {
              switch (location.hash) {
                  case '#/login':
                      oDiv.innerHTML = `<h1>这是登录页面</h1>`;
                      break;
                  case '#/register':
                      oDiv.innerHTML = `<h1>这是注册页面</h1>`;
                      break;
                  default:
                      oDiv.innerHTML = `<h1>这是首页</h1>`;
                      break;
              }
          }
      </script>

   

• 2.2 VueRouter安装使用,需要下载使用:
  •  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  •  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

•  

• 2.3 VueRouter之命名路由
• 2.4 VueRouter之路由参数
• 2.5 VueRouter之路由参数的实现原理
• 2.6 VueRouter之子路由
• 2.7 VueRouter之子路由append
• 2.8 VueRouter之路由重定向
• 2.9 VueRouter之路由的钩子函数
• 2.10 VueRouter之路由钩子实现登录验证
• 2.12 VueRouter实现路飞前端页面