vue router 实战：简易后台管理系统后台管理系统 项目初始化 通过以下命令，我们可以初始化一个 vue 的项目；
站长
· 阅读数 19
我们在上一篇文章中介绍了 Vue 中路由的用法；知道通过路由可以轻松实现单页应用的开发。今天我们可以用
router来实现一个后台管理系统的页面开发，来感受vue router是怎么实现单页应用的过程。
后台管理系统
项目初始化
通过以下命令，我们可以初始化一个 vue 的项目；
npm create vue@latest
接下来，我们可以选择是否要给项目安装路由，安装后我们就可以不用手动装路由了；
CSS Reset
CSS Reset 是一种方法，通过重置或清除浏览器默认样式，使得所有元素回到一个统一的起点。这样可以确保在所有浏览器中都有相同的表现。
我们可以在网站CSS Tools: Reset CSS (meyerweb.com)中去取样式。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
我们可以把reset.css文件放在src目录下的assets文件夹中，并要在入口文件中引入；
准备工作完成后，我们就可以进行页面的开发了。
登录页面
当路由跳转到地址为'/login'时，页面显示登录页；并假设只有我们输入账号为'admin'，密码为'123456'时，才能登录进去。
<template>
<div class="login">
<div class="login-warp">
<div class="username flex">
<label>账号：</label>
<input type="text" v-model="username"/>
</div>
<div class="password flex">
<label>密码：</label>
<input type="password" v-model="password"/>
</div>
<div class="btn" @click="signIn">
登录
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const router = useRouter()
const signIn = () => {
// 模拟登录
if (username.value === 'admin' && password.value === '123456') {
alert('登录成功')
// 跳转到首页
router.push('/home')
} else {
alert('账号或密码不正确')
}
}
</script>
<style lang="css" scoped>
.login{
width: 100vw;
height: 100vh;
/* 渐变色 */
background-image: linear-gradient(to bottom,#fff,#6ec5f0);
display: flex;
justify-content: center;
align-items: center
}
.login-warp{
width: 400px;
}
.flex{
height: 50px;
display: flex;
align-items: center;
}
label{
width: 60px;
}
input{
flex: 1;
font-size: 20px;
padding: 5px;
}
.btn{
width: 80%;
font-size: 20px;
padding: 10px 0;
background-color: #6ec5f0;
color: #fff;
text-align: center;
margin: 0 auto;
margin-top: 30px;
border-radius: 100px;
cursor: pointer;
}
</style>
在上面的代码中，<input type="text" v-model="username"/> 通过 v-model 与 Vue 实例的数据属性之间创建了双向数据绑定；这意味着当用户在输入框中输入数据时，Vue 实例中的相应数据属性也会更新；反之亦然，如果通过 Vue 实例改变了数据属性的值，输入框的值也会随之更新。
首页
当我们登录成功后，路由会跳转至路径为'/home'显示首页；
<template>
<div class="home">
<header class="header">
<div class="title">旅梦后台管理</div>
<div class="user-info">欢迎 admin</div>
</header>
<section class="body">
<aside class="menu">
<ul>
<li class="menu-item" v-for="(item, index) in menu" :key="item.id">
<router-link :to="item.path">{{item.name}}</router-link>
</li>
</ul>
</aside>
<main class="main">
<RouterView></RouterView>
</main>
</section>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router';
const menu = ref([
{id: 1, name: '班级管理', path: '/class'},
{id: 2, name: '讲师列表', path: '/teacher'},
{id: 3, name: '就业统计', path: '/job'}
])
</script>
<style lang="css" scoped>
.home{
height: 100vh;
}
.header{
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 22px;
padding: 0 50px;
background-color: #6ec5f0;
color: #fff;
}
.title{
font-size: 30px;
}
.body{
display: flex;
height: calc(100vh - 70px);
}
.menu{
width: 180px;
background-color: #abdffa;
}
.menu-item {
height: 50px;
}
.menu-item a {
color: #fff;
font-size: 20px;
text-decoration: none;
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 50px;
}
.menu-item a:hover {
background-color: #509ae5;
}
</style>
在首页中，包含一个头部 (header) 和一个主体部分 (body)，主体部分又分为侧边菜单 (aside) 和主要内容区域 (main)。我们用v-for循环去逐一循环渲染了侧边菜单列表；并且点击不同的菜单时，会跳转到相应的路径下。
路由配置
要让页面能成功显示，我们还需要配置路由，让相应的路径能够成功匹配对应的视图组件。
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: ()=> import('../views/Login.vue')
},
{
path: '/home',
component: ()=> import('../views/Home.vue'),
children: [
{
path: '/home',
redirect: '/class'
},
{
path: '/class',
component: ()=> import('../views/pages/Class.vue')
}
]
}
]
})
export default router
{path: '/',redirect: '/login'} 这段代码可以对路径进行重定向；把默认路径设置成为登录页；当我们访问网站时，默认就会跳转到登录页。
小结
通过这个小demo，我们就可以感受到在单页应用的开发中，路由起了至关重要的作用；vue router 可以让用户在导航时不需要等待整个页面重新加载，而是通过局部刷新来实现页面内容的变化，从而提升了应用的响应速度和流畅度。
转载自:https://juejin.cn/post/7400096469728067636