一、路由与动画结合
路由可以与动画结合使用。
二、代码实现
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>路由与动画结合</title>
6 <style>
7 /*设置链接点击后的颜色*/
8 .active{
9 color: red;
10 font-size: 24px;
11 /*去除下划线*/
12 text-decoration: none;
13 }
14 </style>
15 <!--引入vue-->
16 <script src="../js/vue.js"></script>
17 <!-- 引入vue-router -->
18 <script src="../js/vue-router.min.js"></script>
19 <!-- 引入animate.css动画 -->
20 <link rel="stylesheet" href="../css/animate.min.css">
21 </head>
22 <body>
23
24 <div id="hello">
25 <div>
26 <!-- 使用router-link组件来定义导航，to属性指定链接url -->
27 <router-link to='/home'>主页</router-link>
28 <router-link to='/news'>新闻</router-link>
29 <router-link to='/user'>用户</router-link>
30 </div>
31 <div>
32 <transition enter-active-class='animated bounceInLeft' leave-active-class='animated bounceOutRight'>
33 <!-- router-view用来显示路由内容 -->
34 <router-view></router-view>
35 </transition>
36 </div>
37 </div>
38
39 <template id="user">
40 <div>
41 <h4>用户信息</h4>
42 <ul>
43 <li><router-link to='/user/login?name=tom&psw=123'>登录</router-link></li>
44 <li><router-link to='/user/regist/alice/456'>注册</router-link></li>
45 </ul>
46 <!-- router-view用来显示路由内容 -->
47 <router-view></router-view>
48 <!-- 添加路由 -->
49 <button @click='backToHome'>跳转到首页</button>
50 <!-- 替换路由 -->
51 <button @click='replaceToHome'>替换到首页</button>
52 </div>
53 </template>
54
55 <script>
56 //1.定义组件
57 var Home={
58 template:'<h3>我是主页</h3>'
59 }
60 var News={
61 template:'<h3>我是新闻</h3>'
62 }
63 var User={
64 template:'#user',
65 methods:{
66 backToHome(){
67 router.push({path:'/home'}); //添加路由，跳转到home页面
68 },
69 replaceToHome(){
70 router.replace({path:'/home'}); //替换路由，替换到home页面
71 },
72
73 }
74 }
75 var Login={
76 template:'<h5>用户登录的界面 用户名：{{$route.query.name}} 密码：{{$route.query.psw}}</h5>'
77 }
78 var Regist={
79 template:'<h5>用户注册的界面 用户名：{{$route.params.username}} 密码：{{$route.params.password}}</h5>'
80 }
81
82 //2.配置路由
83 const routes=[
84 {path:'/home',component:Home},
85 {path:'/news',component:News},
86 {
87 path:'/user',
88 component:User,
89 children:[ //配置子路由
90 {path:'login',component:Login},
91 {path:'regist/:username/:password',component:Regist}
92 ]
93 },
94 {path:'*',redirect:'/home'} //路由重定向，实现默认显示首页
95 ]
96
97 //3.创建路由实例
98 const router=new VueRouter({
99 routes:routes, //第一个routes是选项，第二个routes是配置路由时自定义的变量名。二者同名，可以直接简写为routes
100 mode:'history', //路由的模式设置为history（默认为hash模式）
101 linkActiveClass:'active' //更改活动链接的class类名
102 });
103
104 //4.将创建的路由实例挂载到Vue实例上
105 let vm = new Vue({
106 el:'#hello',
107 router:router, //第一个router是选项，第二个router是创建路由实例时自定义的变量名。二者同名，可以直接简写为router
108 });
109 </script>
110 </body>
111 </html>