springboot和vue路由跳转
时间: 2023-10-20 22:14:04 浏览: 76
在 Spring Boot 中,一般使用 Thymeleaf 或者其他模板引擎来生成 HTML 页面,而 Vue.js 是一种前端框架,可以实现单页面应用,可以使用 Vue Router 实现路由跳转。
对于 Spring Boot 和 Vue 路由跳转的集成,可以通过以下几步来实现:
1. 在 Spring Boot 中配置静态资源路径,可以在 `application.properties` 文件中添加以下配置:
```
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
```
2. 在 Vue 中配置路由,可以在 `src/router/index.js` 文件中添加路由配置:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
3. 在 Spring Boot 中配置路由转发,可以在 `WebMvcConfigurer` 中添加以下配置:
```java
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
// 将根路径重定向到 index.html,也就是 Vue 的入口页面
registry.addViewController("/").setViewName("forward:/index.html");
}
}
```
4. 在 Vue 中使用路由,可以在组件中添加以下代码:
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
在这里,`<router-link>` 标签用于生成路由链接,`<router-view>` 标签用于渲染当前路由对应的组件。
通过以上步骤,就可以实现 Spring Boot 和 Vue 路由跳转的集成。需要注意的是,由于 Vue 使用的是单页面应用,所有的路由都是在前端进行处理的,因此在 Spring Boot 中需要配置路由转发,将所有请求都转发到 Vue 的入口页面上。