springboot+vue+redis 番茄鲜生电商平台实例三:路由_springboot+vue+redis的后端路由解决-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_29862655/article/details/131683205

本文介绍了在一个基于SpringBoot+Vue+Redis的电商项目中如何进行前端路由的配置。通过安装vue-router，设置路由映射关系，实现了动态加载不同组件的功能。在App.vue中使用router-view标签，根据路由内容加载相应的Vue组件，如Login和Home等，同时展示了在console_layout组件中嵌套子路由以实现菜单点击时内容的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.概述

将之前的一个项目用spring boot+vue+redis进行了改进.从今天(2023年7月10日)开始会逐步在CSND博客上逐步分享.如果你查阅的时间距离现在比较久远请注意技术的更迭,

如果想了解前面的内容,你可以点击下面这个链接:

springboot+vue+redis 番茄鲜生电商平台实例一:登录功能

springboot+vue+redis 番茄鲜生电商平台实例二:后台菜单

什么是路由:

路由分为前端路由和后端路由,今天介绍的是前端路由.

路由的本质其实就是你定义的url和真实路径的对应关系,所以,当你要使用路由之前,你需要定义这种映射关系.

前期准备:

二.安装路由

npm install vue-router@4

三.目录结构

我们先来看看在VS Code中Vue项目的结构

├── src
│   ├── assets  # 静态资源
│   │       └── img  存储页面需要用到的图片
│   │       └── style 全局样式
│   ├── components  # 通用业务组件
│   │      ├── layout  # 存放布局
│   │      ├── menus   # 存放菜单组件
│   │      ├── navbar  # 存放导航组件
│   │      ├── utils   # 存放一些小零件(例如验证码)
│   │      └── views   # 页面组件
│   ├── router         # 路由配置
│   │      └── routers.js    # 配置路由的js文件
│   └── App.vue              # 视图入口,通过App.vue根据路由加载不同的vue组件
├── index.html               # 项目中唯一的页面,用于承载vue组件,并暂时
└── vite.config.js           # 全局配置文件

在这个项目中用index.htm页面显示所有的后台功能,目前要实现的登录页面和后台管理页面.

其中登录页面是一个vue组件,后台管理页面,也