Vue-Router路由Vue-CLI腳手架和模塊化開發之路由的過渡效果

時間 2019-12-10

標籤 vue router 路由 cli 腳手架模塊化開發過渡效果欄目系統網絡简体版

原文原文鏈接

路由能夠結合過渡效果使用；使用<transition></transition>將<router-view></router-view>包裹住，再寫樣式便可。javascript

在下面的實例中用到了第三方的動畫庫animate來進行過渡 animate官網：https://daneden.github.io/animate.css/css

初始點擊時的顯示效果：html

使用transition的初始效果：vue

<link rel="stylesheet" href="../css/animate.css" />


<div id="perfect-router-view">
                <!--將數據顯示在這裏-->
                <transition enter-to-class='animated fadeInLeft delay-1s'
                            leave-to-class='animated fadeOutRight'
                    >
                <router-view></router-view>
                </transition>
            </div>

//使用到的樣式：
#perfect-router-view{
            
            position: absolute;
        }

修改美食廣場下的效果；將美食廣場下的內容下的<router-view>改成以下代碼便可：java

<div id="perfect-router-view">
                <!--將數據顯示在這裏-->
                <transition enter-to-class='animated fadeInLeft delay-1s'
                            leave-to-class='animated fadeOutRight'
                    >
                <router-view></router-view>
                </transition>
            </div>

路由的過渡效果的總demo：git

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title> 路由的過渡效果</title>
  6         <link rel="stylesheet" href="../css/animate.css" />
  7 </head>
  8     <body>
  9         <div id="one">
 10             <router-link to="/home">首頁</router-link>
 11             <router-link to="/foods">美食</router-link>
 12             
 13             <div id="perfect-router-view">
 14                 <!--將數據顯示在這裏-->
 15                 <transition enter-to-class='animated fadeInLeft delay-1s'
 16                             leave-to-class='animated fadeOutRight'
 17                     >
 18                 <router-view></router-view>
 19                 </transition>
 20             </div>
 21         </div>
 22     </body>
 23     <template id="foods">
 24         
 25         
 26         <div>
 27             
 28             <h2>美食廣場</h2>
 29             <ul>
 30                 <router-link to="/foods/bjc/北京烤鴨/68" tag="li"> 北京菜</router-link>
 31                 <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link>
 32                 <router-link to="/foods/xc?name=剁椒魚頭&price=128" tag="li"> 湘菜</router-link>
 33                 <router-link :to="ycParam" tag="li"> 粵菜</router-link>
 34                 <router-link :to="sccParam" tag="li"> 四川菜</router-link>
 35             </ul>
 36             
 37             <div id="perfect-router-view">
 38                 <!--將數據顯示在這裏-->
 39                 <transition enter-to-class='animated fadeInLeft delay-1s'
 40                             leave-to-class='animated fadeOutRight'
 41                     >
 42                 <router-view></router-view>
 43                 </transition>
 44             </div>
 45         </div>
 46     </template>
 47     
 48     <script type="text/javascript" src="../js/vue.js" ></script>
 49     <script type="text/javascript" src="../js/vue-router.js" ></script>
 50     <script>
 51         
 52         //1 定義組件
 53         let Home = {
 54             template : "<h2>首頁</h2>"
 55         }
 56         let Foods = {
 57             template : "#foods",
 58             data(){
 59                 
 60                 return{
 61                     sccParam:{
 62                         
 63                         name:'sccRouter',
 64                         
 65                         params:{
 66                             
 67                             name:"麻婆豆腐",
 68                             price:28
 69                         }
 70                     },
 71                     
 72                     ycParam:{
 73                         path:'/foods/yc',
 74                         query:{
 75                             name:"蜜汁叉燒",
 76                             price:56
 77                             
 78                         }
 79                         
 80                     }
 81                 }
 82             }
 83         }
 84         
 85         //定義foods中的子組件
 86         
 87         let Bjc={
 88             
 89             props:['name','price'],
 90             template : "<h3>北京菜 菜名：{{name}} 價格：{{price}}</h3>"
 91             
 92         }
 93         
 94         let Hnc={
 95             template : "<h3>湖南菜  </h3>"
 96             
 97         }
 98         let Xc={
 99             props:['name','price'],
100             template : "<h3 >湘菜  菜名：{{name}} 價格：{{price}}</h3>"
101             
102         }
103         
104         let Yc={
105             props:['name','price'],
106             template : "<h3>粵菜  菜名：{{name}} 價格：{{price}}</h3>"
107             
108         }
109         
110         let Scc={
111             props:['name','price'],
112             template : "<h3>四川菜  菜名：{{name}} 價格：{{price}}</h3>"
113             
114             
115             
116         }
117         
118         //2 配置路由 路由可能有多個
119         const myRoutes = [
120             {
121                 path : "/home",
122                 component : Home
123             },
124             {
125                 path : "/foods",
126                 component : Foods,
127                 
128                 children:[
129                 {
130                     path:"bjc/:name/:price",//定義其屬性
131                     component:Bjc,
132                     props:true
133                 
134                 
135                 },
136                 {
137                     path:"hnc",
138                     component:Hnc
139                 
140                 
141                 },
142                 
143                 {
144                     path:"xc",
145                     component:Xc,
146                     props : (route) => ({
147                             name : route.query.name,
148                             price : route.query.price
149                     })
150                 
151                 
152                 },
153                 {
154                     path:"yc",
155                     component:Yc,
156                     props:{
157                         
158                         name:'蜜汁叉燒量版式',
159                         price:648
160                     }
161                 
162                 
163                 },
164                 {
165                     name:'sccRouter',
166                     path:"scc",
167                     component:Scc,
168                     props:true
169                 
170                 
171                 }
172                 
173                 
174                 
175                 
176                 
177                 ]
178             },
179         {
180             path:"*",
181                 redirect:"/home"
182             }
183         ]
184         
185         // 3 建立路由對象
186         const myRouter = new VueRouter({
187             //routes : routes
188             routes : myRoutes,
189             //mode:'history'
190              linkActiveClass : "active"
191 
192         });
193         
194         new Vue({
195             //router : router
196             router : myRouter //4 注入路由 簡寫
197         }).$mount("#one");
198     </script>
199     <style>
200         
201         
202         .active{
203             color: white;
204             
205             background-color: black;
206         }
207         #perfect-router-view{
208             
209             position: absolute;
210         }
211     </style>
212 </html>