/* 设置动画效果 */ .v-enter,.v-leave-to{ opacity: 0; transform: translateX(9.375rem); }

.v-enter-active, .v-leave-active{ transition: all 1s ease; }

登陆 注册

// 1. 定义 (路由) 组件。

// 创建登陆组件login var login = { template: "登陆组件, id:{{$route.query.id}}, name:{{$route.query.name}}, age:{{$route.query.age}}", created(){ console.log(this.$route); console.log(this.$route.query.id); console.log(this.$route.query.name); console.log(this.$route.query.age); } }

// 创建注册组件register var register = { template: "注册组件,id:{{$route.params.id}}, name:{{$route.params.name}}, age:{{$route.params.age}}", }

// 2. 定义路由 var routes = [ { path: '/', redirect: '/login' }, { path: '/login', component: login }, { path: '/register/:id/:name/:age', component: register } ]

// 3. 创建 router 实例，然后传 `routes` 配置 var router = new VueRouter({ routes, // (缩写) 相当于 routes: routes linkActiveClass: "myactive", // 自定义选中的class })

// 创建vue的实例 var vm = new Vue({ el: '#app', data: {}, methods:{}, // 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件 components:{}, // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件 router, // 等价于 router: router })