路由可以结合过渡效果使用； 使用<transition></transition>将<router-view></router-view>包裹住，再写样式即可。
在下面的实例中用到了第三方的动画库animate来进行过渡 animate官网：https://daneden.github.io/animate.css/
初始点击时的显示效果：
使用transition的初始效果：
<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>改为如下代码即可：
<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：
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>