通过Vue ElementUI实现登录页面

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

1. Vue组件
2. 路由访问

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

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

Vue项目管理器页面

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

进入Vue项目管理器路径

二、项目结构清理

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

App.vue

<code><template>
  项目主页面
/<template><style>/<code>

router/index.js

<code>import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = []const router = new VueRouter({  routes})export default router/<code>

三、添加并访问登录页面

1.添加登录组件

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

<code><template>    
登录页面
/<template><style>/<code>

2.路由中导入登录组件

router/index.js

<code>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/<code>

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

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

<code><template> 
  <router-view>
/<template><style>/<code>

4.启动项目

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

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

router/index.js

<code>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/<code>

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

閱讀更多 寂寞的老男人 的文章

關鍵字: 页面 登录 访问