<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/vue-rotuer-v3.4.3.js"></script>
<style>
.myactive{
color:red;
font-weight:800;
font-style:italic;
font-size: 80px;
text-decoration: dashed;
}
.venter,
.v-leave-to{
opacity:0;
transform:translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 这是 vue-router 提供的元素,专门用来 当作占位符的,将来,路由规则,匹配到的组件,
就会展示到这个hi router-view 中去-->
<!-- 所以:我们可以把 router-view 认为是一个占位符 -->
<!-- 这里是哈希路径 -->
<!-- <a href="#/login">登录</a>
<a href="#/regedit">注册</a> -->
<!-- router-link 默认渲染为一个 a 标签 tag="span" 设置标签类型-->
<router-link to="/login" tag="span">我要登录</router-link>
<router-link to="/regedit">我要注册</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</body>
<script>
var login = {
template:'<h1>登录组件</h1>'
}
var regedit = {
template:'<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes:[
{ path:'/',redirect:'/login' },
{ path: '/login',component:login},
{ path: '/regedit',component:regedit}
],
linkActiveClass:'myactive'
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:routerObj
})
</script>
</html>