springboot+vue项目基础开发(17)路由使用

已于 2024-02-21 09:07:14 修改
阅读量223 收藏
点赞数 4
分类专栏： 快速搭建springboot项目 文章标签： spring boot vue.js 后端
于 2024-02-21 09:07:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58498702/article/details/136202642
版权
本文介绍了在SpringBoot+Vue项目中如何使用vue Router进行路由配置，包括安装步骤、解决启动报错问题、实现登录跳转功能以及配置子路由。在前端开发中，路由用于根据访问路径展示不同内容。通过在src下创建router文件夹，编写index.js，并在main.js中引入，然后在app.vue中调整，解决了创建时的报错问题。同时，文章还展示了如何创建子路由并设置默认选项菜单。
摘要由CSDN通过智能技术生成

路由

在前端中，路由指的是根据不同的访问路径，展示不同的内容

vue Router的vue.js的官方路由

安装vue Router

在这里插入图片描述

再启动

在这里插入图片描述

在src下面新建router文件,创建index.js

在这里插入图片描述

代码

import {createRouter,createWebHashHistory} from 'vue-router'
//导入组件
import Login from '@/views/Login.vue';
import MainLayout from '@/views/MainLayout.vue';

//定义路由关系
const
了解本专栏 订阅专栏 解锁全文 超级会员免费看
springboot vue 实现动态路由（后端）
chz1878115596的博客
05-05 918
项目的后端用的是springboot2.6。前端是vue2 基于vue admin template开发本篇的持久层框架选择的是springData jpa本文主要讲解动态路由的实现 需要完整代码请参考权限系统。
SpringBoot2.3整合vue-admin-template实现动态路由
liu320yj的博客
09-28 3494
本篇是SpringBoot整合vue-admin-template的第二篇，需要了解SpringBoot如何整合vue-admin-template实现数据库登录认证的小伙伴，请参阅SpringBoot整合vue-admin-template实现登录，本文将主要介绍SpringBoot整合vue-admin-template实现从后台数据实时查询数据动态加载菜单
springBoot集成vue-admin-template实现动态路由使用sql
07-18
springBoot集成vue-admin-template实现动态路由所使用的数据库数据sql
【Spring Boot + Vue】：前端路由VueRouter
z1ztai的博客
03-25 812
方法1：通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数项，比如在商品详情组件的内部，根据 id 值，请求不同的商品数据。思考：如有一个商品列表，当用户点商品的时候就跳转到该商品的详情，每一个商品都会有商品详情，不可能给每一个商品写一个商品详情的组件。这时就希望跳转到详情组件的时候重用组件里面的东西。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射（对应联系）起来，访问不同的路径就显示不同的组件。此时，组件要显示到哪里去？
（十六）VUE权限菜单之动态路由--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-29 7082
根据登录用户的角色进行动态路由分配设计；
springboot+vue开发的项目管理系统源码.zip
03-14
总结，本项目管理系统集成了SpringBoot的强大后端能力与Vue.js的高效前端渲染，为项目开发提供了良好的基础架构。通过深入了解并实践该项目的源码，开发者可以提升对SpringBoot和Vue.js的理解，进一步提升自己的开发...
Springboot+VUE Web开发实践.pdf
11-23
SpringBoot+Vue 开发实践是现代Web应用开发中一种高效且流行的方式，它结合了Java后端的强大功能和Vue.js前端的灵活性。本实践指南旨在为初学者提供一个清晰的路径，了解如何利用这两个框架构建现代化的Web应用程序...
springboot+vue前后端分离开发项目源码
01-02
在现代Web应用开发中，"SpringBoot+Vue"是一个非常流行的组合，用于构建高效、可扩展的前后端分离项目。SpringBoot是Java生态系统中的一个框架，主要用于简化Spring应用的初始搭建以及开发过程，而Vue.js则是一个轻...
SpringBoot+Vue3在线办公系统教学及资料
06-26
1. **环境搭建**：安装Java、Maven、Node.js等开发环境，配置SpringBoot项目和Vue3项目的基本结构。 2. **后端开发**：创建SpringBoot项目，配置数据库连接，编写RESTful API接口，实现数据CRUD操作。 3. **前端开发...
Springboot+vue电子商城项目(含数据库，半成品).rar
12-23
总之，"Springboot+vue电子商城项目(含数据库，半成品)"为学习者提供了一个实战的平台，涵盖了后端开发、前端开发以及数据库管理的核心技术，对于提升开发者的技术栈和实际项目经验具有很高的价值。通过深入研究和...
动态路由前后端vue+springboot实现
softnothings的博客
04-23 2023
动态路由 用户登录成功后根据用户名获取菜单数据，后台封装前端需要的路由格式 1.后端封装路由组件 1.1 RouterVo 实体类 import com.fasterxml.jackson.annotation.JsonInclude; import lombok.AllArgsConstructor; import lombok.Data; import java.util.ArrayList; import java.util.List; /** * 路由需要的数据格式 */ @Data @Js
【7天毕设速成07】Springboot+vue项目用路由实现菜单页面跳转
最新发布
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-15 1778
同学们，前面的课我们已经完成了前后端工程的搭建配置启动。接下来，我们先搭建前端页面框架，再写后端接口框架，最后我们做前后端交互的一个个功能模块。一步一步手把手带你做出自己的毕设。本节课开始，我们正式进入了项目开发的课程，主要实现用elmentUI搭建后台管理系统页面框架。elementUI中文官网：https://element.eleme.cn/#/zh-CN （1）集成ElmentUI（2）运用elementUI el-container 组件实现后台页面布局 （1）集成elmentUI完成页面布局（
学习springboot+vue笔记十五--动态菜单及动态路由
cngm110的博客
04-03 699
动态增加菜单以及解决刷新时菜单丢失的坑，增加动态路由以及解决刷新时路由丢失的坑，增加了404页面解决无路由的提示。
springboot和vue2：十二、配置路径别名+vscode提示+别名跳转+VueRouter(动态路由)+导航守卫
shanshan的博客
10-01 519
仅供学习使用。 有五个组件Discover.vue、Friends.vue、My.vue、TopList.vue、PlayList.vue，其中TopList.vue、PlayList.vue是Discover.vue下的子组件。同时My页面，根据不同的id值，可以请求到不同的商品数据。初始版本：我们想实现的效果为：有三个组件Discover.vue、Friends.vue、My.vue，通过vuerouter来切换并管理。全局导航守卫会拦截每个路由规则，有点类似后端的全局拦截器。
springboot+vue 组件传值和路由传参
m0_59010766的博客
05-05 329
export default { name: 'App', }
Vue从后端取数据，实现动态路由
qq_54421200的博客
01-18 1595
Vue动态路由从后端获取数据，让页面内容更加丰富和动态。通过axios等库，Vue可以方便地发起HTTP请求，从后端获取数据。获取的数据可以存储在Vue组件的data对象中，也可以使用Vuex进行管理。数据获取后，可以使用v-for指令进行列表渲染，也可以使用v-if指令进行条件渲染。通过动态路由，我们可以实现更加灵活的页面展示和交互，提高用户体验。
Vue-admin-template结合后端配置动态路由+动态侧边栏
zzy3110106873的博客
04-01 6184
Vue-admin-template结合后端配置动态路由+动态菜单 在使用这个vue-admin-template的时候，发现其官方文档的推荐是使用动静结合的方法去配置动态路由 其官方大致过程就是 //此处路由数组为通用跳转路径，意思是不需要权限认证即可通过 export const constantRoutes = [{path:'/login'} ...] //此路由数组为所有需要进行认证的后才能决定可不可以跳转 export const asyncRoutes = [{path:'user'}...
springboot vue 实现动态路由（前端）
chz1878115596的博客
05-05 904
项目的后端用的是springboot2.6。前端是vue2 基于vue admin template开发本文主要讲解动态路由的实现 需要完整代码请参考权限系统。
【Spring Boot】SpringBoot中的控制器和路由
Ricky的博客
07-25 5320
这篇博客详细介绍了在SpringBoot中如何使用控制器和路由，包括创建控制器、定义路由、路由匹配规则等。并通过实例演示了如何创建和测试一个简单的控制器和路由。同时，还探讨了如何在控制器中接收请求参数和返回数据，包括JSON数据、视图和文件。希望这篇博客能帮助你更好地理解和使用SpringBoot的控制器和路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜了再学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值