<style type="text/css">
.router-link-active,.active{color:red;font-weight: 700;font-style:italic;font-size:80px;text-decoration: underline;}
.v-enter,.v-leave-to{opacity: 0;transform: translateX(140px);}
.v-enter-active,.v-leave-active{transition: all 0.5s ease}
</style>
<div id="app">
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
var login = {
template:"<h1>登录组件</h1>"
}
var register = {
template:"<h1>注册组件</h1>"
}
var routerObj = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
],
linkActiveClass:'active'
})
var vm = new Vue ({
el:'#app',
data:{},
methods: {
},
router:routerObj,
filters:{},
directives:{},
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated() {},
beforeDestroy(){},
destroyed(){}
});