基于vue-router实现 登录注册 组件切换功能

今天用vue.js的components和vue-router做了个简单的   登录注册  组件切换功能，之前都是通过<a>标签链接两个地址来实现跳转，这样增加了页面跳转所需时间，而且用户在使用时也不够流畅。实现效果如下，点击右下角的登录注册链接切换，（只是图中没有显示出我的鼠标指针）

以下是代码

首先导入vue-router文件，这一步千万不要忘记了

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/vue-router-3.3.2.js"></script>

创建两个模板，并在body中渲染出来

var login = {
	template:'#login'
}
var register = {
	template:'#register'
}

<div id="app">
			<router-view></router-view>
		</div>
		<template id="login">
			<div class="lr">
			    <div class="pic"><img src="../images/login.png" class="img-responsive" alt="" /></div>
			    <form>
			        <input type="text" class="text" placeholder="用户名" >
			        <input type="password" class="pw2" placeholder="密码" >
			        <div class="submit"><input type="submit" onclick="" value="登录"></div>   
			        <div class="new">
			            <p><a href="#">忘记密码？</a></p>
			            <p class="sign"><a href="#/register">注册</a></p>
			            <div class="clear"></div>
			        </div>
			    </form>
			</div>
		</template>
		<template id="register">
			<div class="lr">
			    <div class="pic"><img src="../images/register.png" class="img-responsive" alt="" /></div>
			    <form>
			        <input type="text" class="text" value="用户名" >
			        <input type="password" class="pw1" placeholder="密码" >
					<input type="password" class="pw2" placeholder="请确认密码"/>
			        <div class="submit"><input type="submit" onclick="" value="注册"></div>
			        <div class="clear"></div>
			        <div class="new">
			            <p><a href="#">忘记密码？</a></p>
			            <p class="sign"><a href="#/login">登录</a></p>
			            <div class="clear"></div>
			        </div>
			    </form>
			</div>
		</template>

创建一个路由对象，在函数中定义两个路由对象，并将路由对象注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件

//创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
//在new路由对象的时候，可以为构造函数传递一个配置对象
var routerObj = new VueRouter({
				routes: [//路由匹配规则
                    {path:'/', redirect:'login'},//重定向，默认显示login组件
					{path: '/login', component: login},
					{path: '/register', component:register}					
				]
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				methods:{},
				router:routerObj 
			})