基于vue-router实现 登录注册 组件切换功能
今天用vue.js基于components和vue-router做了个简单的 登录注册 组件切换功能,之前都是通过<a>标签链接两个地址来实现跳转,这样增加了页面跳转所需时间,而且用户在使用时也不够流畅。实现效果如下,点击右下角的登录注册链接切换,(只是图中没有显示出我的鼠标指针)以下是代码首先导入vue-router文件,这一步千万不要忘记了<script src="https
·
今天用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
})
更多推荐
已为社区贡献2条内容
所有评论(0)