Spring Boot + Vue前后端分离（四）前端路由

你好，【程序职场】专注于：Spring Boot ，微服务和前端APP开发，闲暇之余一起聊聊职场规划，个人成长，还能带你一起探索副业赚钱渠道，在提升技术的同时我们一起交流敏捷流程提高工作效率，从技术到管理一步步提升自我！

标签：一个执着的职场程序员！

上篇文章为大家讲述了 Spring Boot + Vue前后端分离（三）实现登录功能；本篇文章接着上篇内容继续为大家介绍前端路由和前后端合并启动，当然前后端合并这种方式不建议在正式部署的时候使用，一般前后端分开部署不同的服务器，除非非要使用这种方式。

本文是Spring Boot + Vue前后端分离系列的第四篇，了解前面的文章有助于更好的理解本文：

1.Spring Boot + Vue前后端分离（一）前端Vue环境搭建
2.Spring Boot + Vue前后端分离（二）前端Vue启动流程
3.Spring Boot + Vue前后端分离（三）实现登录功能

(一).前端路由简介

(二).History路由模式
(三).前后端合并启动

前言

上一篇大家都学习到了前后端分离实现登录功能，相信对于小伙伴来说都知道了前后端分离的原理，细心的小伙伴可能发现，上篇文章中的一个 # 号问题，我们不可能每次浏览器访问打一个#号的，所以本节主要说一下访问#号的处理和前后端合并启动，有些小伙伴就说了，不是前后端分离吗？为什么还要合并启动呢？这也是让大家明白一下，需要的时候怎么做。

好了，多说无益，我们开始今天的知识吧！！！

(一).前端路由简介

上一章一直有一个bug，不知道小伙伴发现没有，我们做的页面的 URL 里有一个 # 号，我们如果不带这个#号访问不正确，这个 # 号有什么含义呢？

在使用Vue开发时，一般会用到vue-router来作为前端路由，实现单页应用。vue-router提供了两种模式模拟一个完整的 URL：

（1）hash模式

（2）history模式。

一、hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

//例如：查看id为1的文章

http://localhost:8080/#/page/1

二、history模式：URL 就像正常的 url，比较好看。

//查看id为1的文章

http://localhost:8080/page/1

那么 vue-router默认是使用hash模式的，不需要额外的配置，所以在上一章中我们访问必须带#号才能正常访问，如果我们想去掉#号需要怎么做呢？

我们只需要使用history模式就可以了

Vue 已经为我们提供了两种模式的前端路由，无需我们自己去实现。

实现方式如下：

前端：vue-router的mode: ‘history’

(二).History路由模式

如果要去掉#号，首先我们把 Vue 中配置的路由从默认的 hash 模式切换为 histroy 模式。打开我们的前端项目，修改文件 router\index.js，加入 mode: 'history 这句话。整体代码如下：

import Vue from 'vue'import Router from 'vue-router'// 导入刚才编写的组件import HomePage from '@/components/home/HomePage'import Login from '@/components/Login'
Vue.use(Router)
export default new Router({  mode: 'history',  routes: [    // 下面都是固定的写法    {      path: '/login',      name: 'Login',      component: Login    },    {      path: '/index',      name: 'HomePage',      component: HomePage    }  ]})

很简单，就是添加一行代码：mode: 'history',

添加后运行项目，这时候访问就不用添加 # 号了 http://localhost:8080/login ，好了，成功加载页面。

(三).前后端合并启动

这里再说一下，我们的项目是前后端分离，这是确定的，但是我们自己在使用的时候可以合并在一起启动，部署，但是正式使用需要部署不同的服务。

那么怎么操作呢？

首先我们要把前端打包后的资源文件放在后端。这不是前后端分离项目推荐的做法，应该把前后端分别部署在不同的服务器中，但实际上仍有不少项目会选择把前后端整合在一起，只使用一个服务器，所以这里我们也提及一下这种方式，但在之后的开发中不会这样部署。

执行命令行：
cnpm run build

成功后会显示如下效果：

成功后查看项目会多一个 dist的目录

dist 文件夹下生成了两个文件 static 文件夹和 index.html 文件，把这两个文件，拷贝到我们后端项目的 \src\main\resources\static 文件夹下，一定要注意这个位置，这时后端配置的静态文件的 path，这里一般都不作修改。

添加好以后我们开心的去运行项目，浏览器访问项目，结果还是不行

在我们访问 http://localhost:8082/index.html ，（注意输入后缀 .html）发现页面是空白的，但确实取到了这个页面，再访问 http://localhost:8082/login ,发现跳转到了错误页面（White Error Page）。

为什么会进入错误页面呢？明明有登录这个操作的。这个错误是找不到的错误页面.

回顾一下单页面应用的概念，在我们这个项目中，其实只有 index.html 这一个页面，所有的其它内容都是在这个页面里动态渲染的。当我们直接在后端访问 /login 路径时，服务器后端并没有这个路径对应的内容，所以返回了 Error Page。

为了获取到我们需要的内容，我们要想办法触发前端路由，即在后端添加处理内容，把通过这个 URL 渲染出的 index.html 返回到浏览器。

功能实现如下：

在后端项目中新建一个包名为 error 的目录，添加实现 ErrorPageRegistrar 接口的类 ErrorConfig，把默认的错误页面设置为 /index.html

package com.cxzc.mycxzc.demo.error;
import org.springframework.boot.web.server.ErrorPageRegistrar;import org.springframework.boot.web.server.ErrorPage;import org.springframework.boot.web.server.ErrorPageRegistry;import org.springframework.http.HttpStatus;import org.springframework.stereotype.Component;
@Componentpublic class ErrorConfig implements ErrorPageRegistrar {
    @Override    public void registerErrorPages(ErrorPageRegistry registry) {        ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");        registry.addErrorPages(error404Page);    }
}

这时，再次访问路径：http://localhost:8082/login 成功进入登录页面。

源码链接： https://github.com/ProceduralZC/bookcircle

好了，通过合并前后端启动项目到这里就ok了，敬请期待下篇。。。

作者：小小蒲公英

Spring Boot + Vue前后端分离（四）前端路由

猜你喜欢