# 使用 Docker 实现 Vue 路由的 History 模式
## 简介
随着前端技术的发展，使用 Vue.js 进行开发已经成为许多开发者的选择。在 Vue.js 中，路由管理是实现单页面应用（SPA）的重要环节，其中使用 HTML5 的 History 模式能够让我们拥有更为友好的 URL。为了简化部署流程，我们可以使用 Docker 对我们的 Vue 应用进行打包和部署。
本文将
原创
2024-08-18 03:46:42
55阅读
阿里云部署（Springboot+vue2.0）前后端分离项目项目架构和部署工具项目工具部署工具后端项目准备及部署购买云端服务器（以下是阿里云，[腾讯请点击我]()）配置服务器Xshell的安装及使用安装MySQL 8.0.26后端项目准备和部署安装JDK将Springboot项目打包成jar包部署后端项目前端项目准备及部署(与centos7安装有差异)安装nginx打包vue项目并部署到前端修
根据用户名和密码去user表中查询是否存在如果不存在登录失败如果存在使jwt生成token返回给前端将token放入redis当中 ,设置过期时间//将token放入redis key: 令牌 value: 用户信息 过期时间：1天
redisTemplate.opsForValue().set(“TOKEN_”+token, JSON.toJSONString(sysUser),1, TimeU
序router.js传递路由{path:'/mine/:name',name:'mine',component:Mine} //通过:传递一个参数，name是谁都可以！路由必须完全匹配！但是可以使用？问号进行查询！1.https://router.vuejs.org/zh/guide/advanced/data-fetching.html动态路由数据获取的参考文档网址。2.http://local
Vue-history模式的SpringBoot配置以及对错误状态的处理使用history模式vue-router 默认是hash模式的，但是连中文官网都承认hash 模式的url很丑，的确像我这种小渣渣都能一眼看出这是个单页面无疑了。比如这样http://xxx.com/#/home/index 官网提出了一种能让url能像http://xxx.com/home/index这样显示的办法，就是
转载
2024-03-18 18:28:14
128阅读
1.全局前置守卫router.beforEach( (to, from , next) =>{} ) to : 即将进入的路由from : 从哪个路由离开next() : 决定是否展示你要看到的路由页面 使用时可以在meta原始数据中定义标识符 2.路由独享守卫在路由配置上定义beforeEnterbeforeEnter : ( to , from , next
转载
2024-10-18 18:48:47
109阅读
一、Vue3.x中的路由路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。Vue Routernpm install vue-router@next --savenpm install vue-router@4二、Vue3.x路由的基本配置1、安装路由模块npm install vue-router@next --save2、新建组件src/views/Home.vue<temp
# 实现"Vue History路由 Spring Boot"教程
## 1. 整体流程
首先，让我们用表格展示整个实现过程的步骤：
| 步骤 | 操作 |
| --- | --- |
| 1 | 创建Vue项目 |
| 2 | 配置Vue Router |
| 3 | 创建Spring Boot项目 |
| 4 | 集成Vue前端项目到Spring Boot项目 |
| 5 | 配置后端路
原创
2024-06-10 04:05:58
338阅读
接着上章节下面我们做一下身份认证登录成功之后前端就可以获取到了jwt的信息，所以后端进行用户身份识别的时候，我们需要通过请求头中获取jwt，然后解析出我们的用户名，这样我们就可以知道是谁在访问我们的接口啦，然后判断用户是否有权限等操作那么我们自定义一个过滤器用来进行识别jwt JWTAuthenticationFilter 代码如下import cn.hutool.core.util.StrUti
转载
2024-10-26 10:09:42
58阅读
Vue路由History模式分析 Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式。 描述 Vue-router的hash模式使用URL的Hash来模拟一个完整
原创
2022-05-27 19:43:15
976阅读
文章目录前言一、vuex1.作用2.属性2.代码二、router1.作用2.引入2.1 引入router3.router 使用一、安装二、创建组件三、router-link制作导航四、动态路由匹配五、vue-router参数传递六.响应路由参数的变化七、实现不同路由不同页面标题八、重定向九、编程式导航1.router.push( )2.router.replace( )3.router.go(n
页面刷新数据丢失在vue中data、vuex store等都数据都是在内存当中的，页面一旦刷新，这些数据就会丢失（或者说被重置为初始值），在某些时候很影响用户体验。缓存，恢复要想使数据刷新不丢失，就得监听页面刷新事件，在刷新前将数据缓存到本地存储，页面刷新后再将数据从本地存储恢复。目前较普遍的做法是类似这样：//App.vue的created():
created() {
//在页面加载
转载
2024-10-18 11:20:16
198阅读
概述API 网关出现的原因是微服务架构的出现，不同的微服务一般会有不同的网络地址，而外部客户端可能需要调用多个服务的接口才能完成一个业务需求。如果让客户端直接与各个微服务通信，会有以下的问题：客户端会多次请求不同的微服务，增加了客户端的复杂性。存在跨域请求，在一定场景下处理相对复杂。认证复杂，每个服务都需要独立认证。难以重构，随着项目的迭代，可能需要重新划分微服务。例如，可能将多个服务合并成一个或
转载
2024-09-29 23:55:39
74阅读
vue需要node.js吗？你可以用 script 标签的形式引入vue.min.js 这样的，不需要nodejs。使用node有几件事，打包部署，解析vue单文件组件，解析每个vue模块，拼在一起，转码es6，less等，启动测试服务器 localhost:8080, 帮你管理 vue-router等插件。所以每次当我们使用 npm run dev 的时候，页面会打开一个 localhost:3
转载
2021-05-10 17:56:21
810阅读
2评论
【代码】vue vuerouter路径模式history。
原创
2023-09-04 17:32:08
98阅读
文章目录props配置props值为对象props值为布尔值props值为函数总结\<router-link>的replace属性总结编程式路由导航案例实现总结缓存路由组件案例实现总结 props配置我们可以看看我们原来如何使用传递过来的参数的：我们要写一大长串去从$route身上拿到我们想要的数据，现在我们可以借助props配置简化代码。props值为对象 然后我们使用的时候只需要
一、用户角色权限管理模块设计“用户-角色-权限”管理是 “访问控制” 的一种实现方式RBACShiro框架，安全框架1、用户密码加密加盐hash加盐加密与验证的逻辑：用户注册时，输入用户名密码（明文），向后台发送请求后台将密码加上随机生成的盐并 hash，再将 hash 后的值作为密码存入数据库，盐也作为单独的字段存起来用户登录时，输入用户名密码（明文），向后台发送请求后台根据
转载
2024-04-07 10:54:30
7阅读
vue & $router & History API
转载
2020-02-07 23:15:00
154阅读
2评论
vue 里面路由有两种显示模式是hash和history，默认是hashhash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加
vue router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 当你使用 history 模式时，URL 就像正常的 url，例如 ://yoursite.com/user/id， 就是长这样的！
转载
2018-12-19 16:27:00
172阅读
2评论
