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了，敬請期待下篇。。。