Vue: 生命周期, VueRouter

时间：2022-08-12 21:46:19

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实现路飞前端页面

相关文章