zoukankan      html  css  js  c++  java
  • vue-router watch监控动画

    红色框为增改内容!!!

    1、src/router4.js

    2、index.html设置样式

    3、main.js指向router4.js文件

     

    router4.js全部代码:
     1 import Vue from 'vue'
     2 import VueRouter from 'vue-router'
     3 Vue.use(VueRouter)
     4 
     5 const Home={template:`<div>Home内容</div>`}
     6 const parent={template:`<div>parent内容</div>`}
     7 
     8 const router=new VueRouter({
     9     mode:'history',
    10     base:__dirname,
    11     routes:[
    12         {path:'/',component:Home},
    13         {path:'/parent',component:parent}
    14     ]
    15 })
    16 
    17 new Vue({
    18     router,
    19     data(){
    20         return{
    21             aaa:'fade'
    22         }
    23     },
    24     template:`
    25         <div>
    26             <p>hello</p>
    27             <ul>
    28                 <li><router-link to="/">/</router-link></li>
    29                 <li><router-link to="/parent">parent</router-link></li>
    30             </ul>
    31             <transition :name="aaa" mode="out-in">
    32                 <router-view></router-view>
    33             </transition>
    34         </div>
    35     `,
    36     watch:{
    37         '$route'(to,from){
    38             if(from.path=='/parent'){
    39                 this.aaa='fade1'
    40             }else{
    41                 this.aaa='fade2'
    42             }
    43         }
    44     }
    45 }).$mount("#app")
    View Code
  • 相关阅读:
    Linux下c++使用pthread库
    一半,一绊
    【codevs3945】 完美拓印
    【poj2942】 Knights of the Round Table
    【bzoj2730】 HNOI2012—矿场搭建
    【poj1177】 Picture
    Tarjan学习笔记
    联赛总结
    【poj3461】 Oulipo
    【csuoj1014】 西湖三人行
  • 原文地址:https://www.cnblogs.com/yijisi/p/11257232.html
Copyright © 2011-2022 走看看