通过Vue ElementUI实现登录页面（element登陆页面）-科研云

通过Vue ElementUI实现登录页面（element登陆页面）

投稿用户 • 2022年7月1日 am11:01 • 科研百科 • 阅读 251

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

Vue组件
路由访问

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

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

通过Vue ElementUI实现登录页面（element登陆页面）

Vue项目管理器页面

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

通过Vue ElementUI实现登录页面（element登陆页面）

进入Vue项目管理器路径

二、项目结构清理

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

App.vue

<template><div id='app'> 项目主页面</div></template><script>export default { name: 'app'}</script><style></style>

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,并添加三块固定内容

<template> <div>登录页面</div></template><script>export default { }</script><style lang="less" scoped></style>

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占位符中显示

<template><div id='app'> <router-view></router-view></div></template><script>export default { name: 'app'}</script><style></style>

4.启动项目

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

通过Vue ElementUI实现登录页面（element登陆页面）

这里我们必须通过/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实现登录页面（element登陆页面）

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

通过Vue ElementUI实现登录页面（element登陆页面）

相关推荐