首页 > 其他分享 >vue项目中使用histroy代替hash(兼容刷新后页面丢失)

vue项目中使用histroy代替hash(兼容刷新后页面丢失)

时间:2022-12-28 22:00:43浏览次数:57  
标签:vue hash express histroy api connect var fallback history


1、在node.js解决
node中 安装插件connect-history-api-fallback

npm install --save connect-history-api-fallback
var history = require('connect-history-api-fallback');
var express = require('express');
var app = express();
app.use(history());

2、后端在Nginx配置

3、后端开发在服务器中写正则来匹配路由配置哪些是后端接口

标签:vue,hash,express,histroy,api,connect,var,fallback,history
From: https://www.cnblogs.com/cat-eol/p/17011363.html

相关文章

  • vue中 WebSocket connection to 'ws://192.168.10.103:8080/ws' failed 问题的解决
    首先吧 vue中WebSocketconnectionto'ws://192.168.10.103:8080/ws'failed这个报错它不会影响你代码的运行,但是报错一定程度上影响页面的美观度。   下面我们......
  • Vue3 学习笔记
    有Vue2的基础,笔记只记载之前不熟悉的知识一、Vue基本知识1.Vue3基本指令1.1v-prev-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:跳过不需要......
  • vue框架学习笔记
    #webpack使用 概念:webpack是前端项目工程化的具体解决方案主要功能:提供前端模块化开发支持、代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等;//使用Node.j......
  • vue根据汉字添加拼音
    效果如下 安装工具库npminstallpinyin-pro或者yarnaddpinyin-pro封装组件change-pinyin<template><divclass="pinyin"><divclass="wordBox......
  • vue+nuxtJs+vue-monaco制作Monaco Editor编辑器(插件有bug不推荐使用)
    目录前言一、版本二、使用前配置1.插件注册文件2.nuxt.config.js三、使用四、插件bug五、附录1.kind提示图标类型2.默认action前言建议别用,有bug;后续写个不用vue-monaco......
  • vue3封装axios并使用拦截器处理错误
    utils/http.jsimportaxiosfrom"axios";consthttp=axios.create({withCredentials:false,timeout:30000,baseURL:"http://127.0.0.1:8000",header......
  • vue项目增加进度条nprogress
    1.安装nprogresscnpminprogress2.在untils文件夹下创建nprogress.ts文件1importNProgressfrom'nprogress';2import'nprogress/nprogress.css';34/......
  • Vue3 富文本编辑器
    官网https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1 安装:npminstall@wangeditor/editor--savenpminstall@wangeditor/editor-for-vue@n......
  • vue动态菜单创建icon
    如图,左侧的菜单是动态生成的,前面的icon图标也要动态创建 实现方法:使用vue的 createVNode定义一个生成icon的文件:  createIcon.jsimport*asiconsfrom"@......
  • vue 使用 antv/g2
    效果:安装: npminstall@antv/g2--save引入:import{Chart}from'@antv/g2';使用:<divid="c1"></div>LeftChart(){constchart=newCha......