通过Vue ElementUI实现登录页面

Vedu • 2020-03-28 18:03 • 界面设计 • 阅读 8968

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

Vue组件
路由访问

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

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

Vue项目管理器页面

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

进入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, 登录页面已经可以正常访问

这里我们必须通过/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/#/直接访问到登录页面，如下

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

内容出处：，

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

通过Vue ElementUI实现登录页面

相关推荐

发表评论