<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .myactive{ font-weight: 700; font-size: 16px; background-color: yellow; color: pink; text-decoration: underline; } .v-enter, .v-leave-to{ opacity: 0; transform: translateX(80px); } .v-enter-active, .v-leave-active{ transition:all 1s ease } </style> </head> <body> <div id="app"> <!--<a href="#/login">登录组件</a>--> <!--<a href="#/register">注册组件</a>--> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <transition mode="out-in"> <router-view></router-view> </transition> <!--// vue-router提供的标签,专门用来当作占位符,将来路由规则匹配到的组件会展示到它中去--> </div> <script src="../vue-dev/vue-dev/dist/vue.min.js"></script> <script src="vue-router.js"></script> <script> // 创建两个路由组件 var login = { template:"<h3>登录页面</h3>" } var register = { template:"<h3>注册页面</h3>" } // 创建一个路由对象; // 为构造函数传递一个配置对象 var routerObj = new VueRouter({ // 路由配置规则都是一个对象,必须有两个属性; routes:[ {path:"/login",component:login}, {path:"/register",component:register} ], linkActiveClass:"myactive" }) var vm = new Vue({ el:"#app", data:{ }, methods:{ }, // 将路由规则对象注册到vue实例上用来监听URL地址变化,然后展示对应的组件 router:routerObj }) </script> </body> </html>
为路由切换启动动画
最新推荐文章于 2024-07-05 22:10:55 发布