通过Vue ElementUI实现登录页面

通过这篇文章,我们可以知道如何通过Vue路由方式实现登录页面的访问。主要知识点包括:

  1. Vue组件
  2. 路由访问

一、通过Vue-Cli创建一个项目

安装Vue-Cli之后,通过vue ui命令启动项目管理器页面。如果是第一次创建项目会自动进入项目管理器页面,如下:

通过Vue ElementUI实现登录页面

Vue项目管理器页面

如果非第一次创建项目,在左上角列表中选择Vue项目管理器,进入上图页面。如下图所示:

通过Vue ElementUI实现登录页面

进入Vue项目管理器路径

二、项目结构清理

创建项目之后,进入项目目录下,将里面的样例内容全部清除

App.vue

 
项目主页面





router/index.js

import Vue from \'vue\'
import VueRouter from \'vue-router\'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router

三、添加并访问登录页面

1.添加登录组件

components目录下新建Login.vue,并添加三块固定内容

 
登录页面





2.路由中导入登录组件

router/index.js

import Vue from \'vue\'
import VueRouter from \'vue-router\'
import Login from \'../components/Login\'

Vue.use(VueRouter)

const routes = [
  { path: \'/login\', component: Login}
]

const router = new VueRouter({
  routes
})

export default router

3.App.vue中添加路由占位符

这样使得router/index.js中路由匹配到的组件都会被渲染到router-view占位符中显示

 





4.启动项目

访问http://localhost:8080/#/login, 登录页面已经可以正常访问

通过Vue ElementUI实现登录页面

这里我们必须通过/login来访问登录页面,如果希望默认情况下就直接访问登录页面,可以在路由中添加路由信息{ path: \’/\’, redirect: \’/login\’ },,如下:

router/index.js

import Vue from \'vue\'
import VueRouter from \'vue-router\'
import Login from \'../components/Login\'

Vue.use(VueRouter)

const routes = [
  { path: \'/\', redirect: \'/login\' },
  { path: \'/login\', component: Login }
]

const router = new VueRouter({
  routes
})

export default router

这样我们可以通过http://localhost:8080/#/直接访问到登录页面,如下

通过Vue ElementUI实现登录页面

这样一个登录页面已经实现,接着就是如何去设计登录页面。

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/surface/8034.html

发表评论

登录后才能评论