spring mvc與vue.js集成，如何使用vue的history模式

DTeam 發(fā)布于2019-08-16 10:57 / 1319人閱讀

摘要：前言前后臺分離的開發(fā)模式可以提高效率，方便優(yōu)化，本文章主要分享如何在已經(jīng)在中集成了訪問模式的情況下，怎么改成的模式集成。

前言

前后臺分離的開發(fā)模式可以提高效率，方便優(yōu)化，本文章主要分享如何在已經(jīng)在spring mvc中集成了vue.js hash#訪問模式的情況下，怎么改成vue.js的history模式集成。

部署目錄結(jié)構(gòu)

前端(vue.js部分)

主要是兩個文件
1.vue.js生產(chǎn)打包配置文件config/index.js中assetsPublicPath為發(fā)布到服務(wù)器的項目工程根目錄

2.路由對象中設(shè)置

mode: "history",//訪問模式為history，不帶#
base: "/NALM",//項目工程根目錄

后端(spring mvc部分)

1先說web.xml部分
先設(shè)置404錯誤頁面攔截到/index.html(與vue官網(wǎng)配置一個道理，官網(wǎng)上寫的是Nginx和Apache的攔截)

2.spring mvc攔截說明
因為我的spring mvc工程為/匹配到Controller里面去這里有一個問題，只配置上面的步驟,這里就會有一個問題，頁面請求全部到DispatcherServlet里面去了，需要在mvc的配置文件中聲明/index.html和static文件夾為resources就可以了

GPU云服務(wù)器云服務(wù)器 Vue.js vue.js 屬性 vue.js自學(xué) cdn vue.js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/70789.html

相關(guān)文章

關(guān)于框架

摘要：事件訂閱發(fā)布者模式什么是讀音類似于是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是，采用自底向上增量開發(fā)的設(shè)計。 MVC && MVVM 前端框架前端 MV*框架的意義被誤解的MVC和被神化的MVVM Vue.js新手入門指南單頁應(yīng)用SPA的路由單頁面應(yīng)用的路由問題本文是在自己總結(jié)時，看了許多篇文章有了些體會，然后把我認為有意義的摘抄下來，文中很大部分摘錄以上...

Richard_Gao 2019-08-20 18:30 評論0 收藏0
SpringBoot-vue 基于Java的微服務(wù)全棧快速開發(fā)實踐

摘要：本項目將使用配合最簡單的邏輯來展示一個基于的微服務(wù)全棧快速開發(fā)實踐的。提供一系列大型項目常用的非功能性特征，比如內(nèi)嵌服務(wù)器，安全，指標，健康檢測，外部化配置。 SprintBoot-Vue SpringBoot ＋前端MVVM 基于Java的微服務(wù)全棧快速開發(fā)實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

FleyX 2019-08-21 11:48 評論0 收藏0
SpringBoot-vue 基于Java的微服務(wù)全棧快速開發(fā)實踐

摘要：本項目將使用配合最簡單的邏輯來展示一個基于的微服務(wù)全棧快速開發(fā)實踐的。提供一系列大型項目常用的非功能性特征，比如內(nèi)嵌服務(wù)器，安全，指標，健康檢測，外部化配置。 SprintBoot-Vue SpringBoot ＋前端MVVM 基于Java的微服務(wù)全棧快速開發(fā)實踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

neu 2019-08-15 10:50 評論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件。總結(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎(chǔ)知識概覽第一章 - 一些基礎(chǔ)概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設(shè)定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0
從頭開始學(xué)習(xí)vue-router

摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數(shù)跳轉(zhuǎn)對應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級路由實際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。一、前言要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0