利用vue实现登陆界面及其跳转

利用vue实现登陆界面及其跳转

1.做登录框

 步骤:

(1) 创建vue项目,使用vite方式创建;npm init vue@latest

(2)项目结构:

 src:代码书写位置;

app.vue:根组件;

main.js:将根组件与首页进行连接;

index.html:首页;

package-lock.json:项目配置,安装依赖,启动命令的配置;

vite.config.js:vite的配置文件;

(3)书写登录组件

***ponents:规范情况,将组件书写***ponents下;

组件:一个vue文件,我们把这个vue组件称之为单文件组件 SFC(Signed File ***ponent) 格式:Login.vue(文件名是大驼峰式命名规则);

 

Tips:

(1)设置了display:flex后,容器中所有的项目都会变成内联块;

(2)在输入用户名目密码的表单元素上做数据的双向绑定,v-model="响应式变量";

(3)使用修饰符.trim 取消输入内容前后的空格;

(4)在按钮上取消默认行为(.prevent,相当于事件对象event.defaultPrevent()),并绑定click 事件(v-on:click 简写成@click),当点击时,触发login函数login;

(5)方法,响应式数据是data函数,返回一个对象。 methods是一个对象 ,在对象内部书写各种函数;

(6)login方法的实现

       (a)在methods中创建login方法

             methods:{

                login() {

                      }

                   }

       (b)判断输入的数据是否为空

在方法中,可以通过this来获取响应式数据

如果为空:

如果出错:

注: isShow:用来控制 类样式tip,isShow=true,就显示class='tip',否则,class='', 通过isShow控制提示框的显示和隐藏,使用v-show命令;

(c)跳转界面

(4)启动项目,打开页面,直接进入login页面

(a)  登陆成功后,让页面进行跳转,跳转到Index组件 Index.vue的内容如下 :

 

 

Index.vue所在位置:

  (b) 创建路由

在router目录下,创建index.js文件,编写路径与组件的映射关系;

 

1)怎么进入登录?通过在router目录的index.js中配置登录路径与登录组件的映射;

2)但是,输入的路径如果不对,页面就会显示空白。这样不友好。因此,当路径不存在时,显示 404。如何做呢?

3)HobbyOne.vue   (HobbyTwo.vue,HobbyThree.vue同理)(此处为本人无聊制作而成,并无其他意义!!!)

 

 

 

 

4)NotFound.vue    (此处为本人无聊制作而成,并无其他意义!!!)

 

 

(c)告诉app应用,使用路由。

 

(5)在App.vue中通过标签进行指定。

 

 

 

 

 

 

 

 

 

转载请说明出处内容投诉
CSS教程_站长资源网 » 利用vue实现登陆界面及其跳转

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买