zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Good Bye 2014 B. New Year Permutation(floyd )
    hdu 5147 Sequence II (树状数组 求逆序数)
    POJ 1696 Space Ant (极角排序)
    POJ 2398 Toy Storage (叉积判断点和线段的关系)
    hdu 2897 邂逅明下 (简单巴什博弈)
    poj 1410 Intersection (判断线段与矩形相交 判线段相交)
    HDU 3400 Line belt (三分嵌套)
    Codeforces Round #279 (Div. 2) C. Hacking Cypher (大数取余)
    Codeforces Round #179 (Div. 2) B. Yaroslav and Two Strings (容斥原理)
    hdu 1576 A/B (求逆元)
  • 原文地址:https://www.cnblogs.com/xiao-xue-di/p/9942193.html
Copyright © 2011-2022 走看看