vue-router watch监控动画

Posted 2022-05-21 yijisi

红色框为增改内容！！！

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