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

 

 

 

本篇文章接着上篇内容继续为你们介绍 前端路由和先后端合并启动，固然先后端合并这种方式不建议在正式部署的时候使用，通常先后端分开部署不一样的服务器，除非非要使用这种方式。

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

---

 

---

 

目录

(一).前端路由简介

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

 

前言

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

 

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

 

(一).前端路由简介

 

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

 

 

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

（1）hash模式

（2）history模式。

 

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

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

 

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

//查看id为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 {
@Overridepublic void registerErrorPages(ErrorPageRegistry registry) {ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");registry.addErrorPages(error404Page);}
}

 

 

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

 

 

 

 

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