Vue实例生命周期+vueRoter

Vue实例生命周期

vue生命周期之beforeCreate

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

vue生命周期之created

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

vue生命周期之beforeMount

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

vue生命周期之mounted

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

vue生命周期之beforeUpdata

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

vue生命周期之updata

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

vue生命周期之beforeDestory

所有的数据都存在

vue生命周期之destory

所有的数据都有(虚拟DOM中找)

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

用activated和deactivated取代了beforeUpdate和destory的执行

vueRoter

实现原理

<div id=‘app‘>    <a href="#/login">登录</a>    <a href="#/register">注册</a></div><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;        }    }</script>

安装使用

// 直接下载安装  vue-router.js 地址:https://router.vuejs.org/zh/installation.html
<div id="app">?</div>?<script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`    };    let Login = {        template: `<div><h1>这是登录页面</h1></div>`    };    let Register = {        template: `<div><h1>这是注册页面</h1></div>`    };?    let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link to=‘/‘>首页</router-link>                    <router-link to=‘/login‘>登录</router-link>                    <router-link to=‘/register‘>注册</router-link>                    <router-view></router-view>                </div>`,?    };    // 第二步,创建VueRouter对象    // 本质上是将路径和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                path: ‘/‘,                component: Home,            },            {                path: ‘/login‘,                component: Login,            },            {                path: ‘/register‘,                component: Register,            },        ]    });    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        template: ‘<App/>‘,        components: {            App,        }    })</script>

命名路由

<div id="app"></div>?<script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`    };    let Login = {        template: `<div><h1>这是登录页面</h1></div>`    };    let Register = {        template: `<div><h1>这是注册页面</h1></div>`    };?    let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "login"}‘>登录</router-link>                    <router-link :to=‘{name: "register"}‘>注册</router-link>                    <router-view></router-view>                </div>`,?    };    // 第二步,创建VueRouter对象    // 本质上是将路径和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘home‘,                path: ‘/‘,                component: Home,            },            {                name: ‘login‘,                path: ‘/login‘,                component: Login,            },            {                name: ‘register‘,                path: ‘/register‘,                component: Register,            },        ]    });    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        template: ‘<App/>‘,        components: {            App,        }    })</script>

路由参数的实现

<script>    // 之真实的场景中,xxx/1  带有参数    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);        let Home = {        template: `<div><h1>这是主页面</h1></div>`    };    let userParams = {        template: `<div><h1>这是用户一的信息</h1></div>`    };    let userParams = {        template: `<div><h1>这是用户二的信息</h1></div>`    };        let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "userParams", params: {userId: 1}}>登录</router-link>                    <router-link :to=‘{name: "userQuery", query: {userId: 2}}‘>注册</router-link>                    <router-view></router-view>                </div>`,            };    // 第二步,创建VueRouter对象    // 本质上是将路径和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘hoem‘,                path: ‘/‘,                component: Home,            },            {                // xxx/1                name: ‘userParams‘,                path: ‘/user/:userId‘,                component: userParams,            },            {                //xxx/?userId=1                name = ‘userQuery‘,                path: ‘/user‘,                compontennt: userQuery,            }        ]       })    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        components: {            App,        }    })</script>

路由参数的实现原理

<div id="app"></div>?<script>    // 之真实的场景中,xxx/1  带有参数    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`,        mounted(){            console.log(this.$route);        }    };    let userParams = {        template: `<div><h1>这是用户一的信息</h1></div>`,        mounted(){            console.log(this.$route);        }    };    let userQuery = {        template: `<div><h1>这是用户二的信息</h1></div>`    };?let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "userParams", params: {userId: 1}}‘>登录</router-link>                    <router-link :to=‘{name: "userQuery", query: {userId: 2, id: 1, ss: 4}}‘>注册</router-link>                    <router-view></router-view>                </div>`,?    };    // 第二步,创建VueRouter对象    // 本质上是将路径和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘home‘,                path: ‘/‘,                component: Home,            },            {                // xxx/1                name: ‘userParams‘,                path: ‘/user/:userId‘,                component: userParams,            },            {                //xxx/?userId=2                name : ‘userQuery‘,                path: ‘/user‘,                component: userQuery,            }        ]    });    new Vue({        el: ‘#app‘,        template: `<App/>`,        // 第三步,在根实例中注册router对象        router: router,        components: {            App,        }    })</script>

子路由

<div id="app"></div>?<script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`,    };    let Courses = {        template: `<div><h1>这是课程页面</h1>                    <router-link to=‘/courses/lightcourses‘>免费</router-link>                    <router-link to=‘/courses/degreecourses‘>收费</router-link>                    <router-view></router-view>                </div>`,    };    let Lightcourses = {        template: `<div><h1>这是轻课页面</h1></div>`,    };    let Degreecourses = {        template: `<div><h1>这是学位课程页面</h1></div>`,    };?    let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "courses"}‘>登录</router-link>                    <router-view></router-view>                </div>`,    };    // 第二步,创建VueRouter对象    // 本质上是将路径和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘home‘,                path: ‘/‘,                component: Home,            },            {                name: ‘courses‘,                path: ‘/courses‘,                component: Courses,                children: [                    {                        path: ‘/courses/lightcourses‘,                        component: Lightcourses                    },                    {                        path: ‘/courses/degreecourses‘,                        component: Degreecourses                    }                ]            },        ]    });    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        template: ‘<App/>‘,        components: {            App,        }    })</script>

子路由append

<div id="app"></div><script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`,    };    let Courses = {        template: `<div><h1>这是课程页面</h1>                    <router-link :to=‘{name: "lightcourses" }‘ append >轻课</router-link>                    <router-link :to=‘{name: "degreecourses" }‘>学位课</router-link>                    <router-view></router-view>                </div>`,    };    let LightCourses = {        template: `<div><h1>这是轻课页面</h1></div>`,    };    let DegreeCourses = {        template: `<div><h1>这是学位课程页面</h1></div>`,    };?    let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "courses"}‘>课程</router-link>                    <router-view></router-view>                </div>`,?    };    // 第二步,创建VueRouter对象    // 本质上是将路径和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘home‘,                path: ‘/‘,                component: Home,            },            {                name: ‘courses‘,                path: ‘/courses‘,                component: Courses,                children: [                    {                        name: ‘lightcourses‘,                        path: ‘lightcourese‘,                        component: LightCourses                    },                    {                        name: ‘degreecourses‘,                        path: ‘degreecourses‘,                        component: DegreeCourses                    },                ]            },        ]    });    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        template: "<App/>",        components: {            App,        }    })</script>

路由重定向

<script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);        let Home = {        template: `<div><h1>这是主页面</h1></div>`,    };    let Pay = {        template: `<div><h1>这是支付页面</h1></div>`,    };    let Login = {        template: `<div><h1>这是登录页面</h1></div>`,    };        let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "login",}>登录</router-link>                    <router-link :to=‘{name: "pay",}>支付</router-link>                    <router-view></router-view>                </div>`,            };    // 第二步,创建VueRouter对象    // 把a标签的锚点值和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘hoem‘,                path: ‘/‘,                component: Home,            },            {                name: ‘login‘,                path: ‘/login‘,                component: Login,            },            {                name: ‘pay‘,                path: ‘/pay‘,                redirect: ‘/login‘,                component: Pay,            },        ]       })    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        components: {            App,        }    })</script>

路由的钩子函数

<div id="app"></div><script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`,    };    let Pay = {        template: `<div><h1>这是支付页面</h1></div>`,    };    let Login = {        template: `<div><h1>这是登录页面</h1></div>`,    };?    let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "login"}‘>登录</router-link>                    <router-link :to=‘{name: "pay"}‘>支付</router-link>                    <router-view></router-view>                </div>`,?    };    // 第二步,创建VueRouter对象    // 把a标签的锚点值和页面内容绑定了对应关系    let router = new VueRouter({        routes: [            // 对应关系            {                name: ‘home‘,                path: ‘/‘,                component: Home,            },            {                name: ‘login‘,                path: ‘/login‘,                component: Login,            },            {                name: ‘pay‘,                path: ‘/pay‘,                meta: { required_login: true },                component: Pay,            },        ]    });?    // 通过router对象的beforeEach(function(to, from, next))    router.beforeEach(function(to, from, next){        console.log(‘to‘, to);        console.log("from", from);        console.log("next", next);        if (to.meta.required_login){            next(‘/login‘);        }        else{            next();        }    });    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        components: {            App,        },        template: ‘<App/>‘,    })</script>

路径去掉#号

在router对象中加入mode: ‘history‘

<div id="app"></div><script>    // 第一步,在vue根实例中使用VueRouter    Vue.use(VueRouter);?    let Home = {        template: `<div><h1>这是主页面</h1></div>`,    };    let Pay = {        template: `<div><h1>这是支付页面</h1></div>`,    };    let Login = {        template: `<div><h1>这是登录页面</h1></div>`,    };?    let App = {        // 第四步        // router-link会渲染成a标签,to会变成href属性,to后面是routers中定义的路径        // 第五步        // router-view页面内容的渲染出口        template: `<div>                    <router-link :to=‘{name: "home"}‘>首页</router-link>                    <router-link :to=‘{name: "login"}‘>登录</router-link>                    <router-link :to=‘{name: "pay"}‘>支付</router-link>                    <router-view></router-view>                </div>`,?    };    // 第二步,创建VueRouter对象    // 把a标签的锚点值和页面内容绑定了对应关系    let router = new VueRouter({        mode: ‘history‘, // 去掉# 号        routes: [            // 对应关系            {                name: ‘home‘,                path: ‘/‘,                component: Home,            },            {                name: ‘login‘,                path: ‘/login‘,                component: Login,            },            {                name: ‘pay‘,                path: ‘/pay‘,                meta: { required_login: true },                component: Pay,            },        ]    });?    // 通过router对象的beforeEach(function(to, from, next))    router.beforeEach(function(to, from, next){        console.log(‘to‘, to);        console.log("from", from);        console.log("next", next);        if (to.meta.required_login){            next(‘/login‘);        }        else{            next();        }    });    new Vue({        el: ‘#app‘,        // 第三步,在根实例中注册router对象        router: router,        components: {            App,        },        template: ‘<App/>‘,    })</script>

原文地址:https://www.cnblogs.com/xiao-xue-di/p/9942193.html

时间: 2024-11-08 19:22:49

Vue实例生命周期+vueRoter的相关文章

Vue实例生命周期

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即

vue实例生命周期详解

每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会.例如,created 这个钩子在实例被创建之后被调用 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log

【Vue实例生命周期】 -- 2019-08-08 18:01:29

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://106.13.73.98/_

【Vue实例生命周期】 -- 2019-08-09 12:10:28

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://106.13.73.98/_

【Vue实例生命周期】 -- 2019-08-11 18:47:26

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://106.13.73.98/_

【Vue实例生命周期】 &#591699;

目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpdate 数据更新之后执行--updated 实例销毁之前执行--beforeDestroy 实例销毁之后执行--destroyed keep-alive组件激活时执行--activated keep-alive组件停用时执行--deactivated 原文: http://blog.gqylpy.co

vue入门:(底层渲染实现render函数、实例生命周期)

vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法实现挂载.不管是哪种挂载都不影响vue实例化组件的执行流程和模式,只是通过vue.$mount()方法实现挂载可以更灵活的实现组件复用和挂载. 1 var vm = new Vue({ 2 el:'挂载元素id',//实例化el属性实现挂载 3 ... 4 }) 5 var vm1 = new Vu

浅谈Vue的生命周期模型

Vue实例从创建到销毁的过程,就是生命周期.Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些javascript方法中的this直接指向的是vue的实例. 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会. Vue提供的生命周期钩子如下:① beforeCreate在实例初始化之后,数据观测(da

vue的生命周期

这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(){ console.log("创建前========&quo