网站内容管理系统后台 设计(深入了解VUE3实践-搭建后台（二）编写登录页面 )

　　网站内容管理系统后台 设计(深入了解VUE3实践-搭建后台（二）编写登录页面

)

　　上一篇文章我们讲了《深入理解VUE3实践-搭建后台（二）），没查过的同学可以去查一下。

　　前言

　　上一篇我们讲解了VUE3项目的主要入口文件，main.js和App.vue文件。在上一篇文章的最后，我们还提到，当我们亲自修改这两个文件时，我们的发布页面并没有太大变化。那么今天我们就带大家去编写具体的页面。

　　开始

　　对于一个后台管理系统来说，登录页面和登录后的页面是必不可少的。所以我将从编写登录页面开始。

　　根据目录，我们在views目录下新建login和home文件夹，在对应文件夹下新建index.vue。

　　登录/index.vue

　　# 在login的页面中我们写入最简单的代码进行测试

登录页面

h1 {

font-size:14px;

}

　　同样，我们也在 home/index.vue 页面添加最简单的代码来区分。

　　好了，到这里我们简单的登录页面就完成了。然后是时候看看效果了。此时

　　每个人都必须是其他人，我们应该如何访问。（第一次同学可能直接运行，发现没有效果，奇怪了半天）。其实这涉及到我们今天讲的另一个问题，路由。

　　像vue和react一样，我们需要自己定义一套前端路由，也就是我们前面提到的vue-router插件。

　　路线起点

　　这时候我们需要在router目录下添加一个路由文件。目录结构如下：（这里需要说明一下，路由文件不需要像我这里写的那样写成一个文件。在实际项目中，我们会分成多个文件，如：白名单，权限验证等，这里就不做复杂的了，先简单的，后面我会加的）

　　路由这个地方其实有一个知识点。主要分为动态路由和静态路由两种，可以根据自己项目的实际情况进行选择。让我们分别解释这两种情况。

　　一、静态路由

　　静态路由，顾名思义，就是我们前端定义的路由。不需要与后端合作的路由。我们来看看这样的路由代码

　　# 这就是静态路由

# 这里有一个“@”，这个要说明一下。这个是我们在第一节的时候在vite.config.js定义的快捷方式.

# 在这里进行说明是怕大家在其他的项目中也用这种方式，导致报错。

import { createRouter, createWebHistory } from 'vue-router';

import Login from '@/views/login/index.vue';//登录页面

import errorPage404 from '@/views/errorPage/404.vue';//404错误页面

import Home from '@/views/home/index.vue';

const routes = [

{

path: '/',

name: "home",

component: Home

},

{

path: '/login',

name: 'Login',

component: Login

},

{

path: '/404',

name: '404',

component: errorPage404

}

];

const router = createRouter({

history: createWebHistory(),

routes

})

export default router