vue修改为history模式

最新推荐文章于 2024-07-10 17:02:01 发布
最新推荐文章于 2024-07-10 17:02:01 发布
阅读量1.7k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_15557299/article/details/123865287
本文介绍如何使用Vue Router的历史模式来去除URL中不美观的井号('#')，通过配置新的Vue Router实例，设置mode为'history'并定义路由规则，可以实现更优雅的URL结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

注意事项 new VueRouter的{}里面写

const router = new VueRouter({
  mode: 'history',
  routes
})

这样丑陋的#就消失了

vue-cli history模式实现tomcat部署报404的解决方式
10-16
其中，`history`模式是Vue Router的一种路由模式，它可以让应用的路由表现得更像传统的Web应用，使得URL无需包含哈希(`#`)符号，从而提供更好的用户体验。然而，当使用`history`模式并将应用部署到Apache、Nginx或...
解决vue router使用 history 模式刷新后404问题
12-09
想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端...
vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
history 改成 模式_VUE 改成history 模式 刷新404 的问题
weixin_36487445的博客
12-23 259
vue 路由的URL有两种模式，一种是 hash，一种是history ，history 模式更好看一些。在使用hisory模式时，由于地址并不是真实存在，那么在刷新的情况下，这个会报404错误。改成history 模式，如果在直接在根目录下访问还是比较简单的。修改 webpack 的配置文件config/index.jsmodule.exports ={build: {env: require(...
vue router路由模式 hash改为history 对应配置
yangqii的博客
03-26 1700
本地项目运行下对应修改配置： 1.router 配置文件index.js 2.vue.config.js (vue cli4.x) publicPath属性 "./" 改为“/” （对应报错：页面404） 3.index.html 中调用的文件路径采用绝对路径‘/’，相对路径下页面刷新页面会出错 参考文章： vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法 解决vue route...
Vue hash模式改为history模式
1
06-09 1877
如上图所示非常简单,只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了
vue hash模式切换成history模式
Cynthia_Wiki的博客
10-17 2461
第一步，根据项目情况在router/index.js里修改 mode: 'history', // 放在根目录 base: '/', mode: 'history', // 放在子目录 base: '/子目录名', 第二步，打包配置里，根据项目路径配置情况修改 //子目录 assetsPublicPath: '/子目录名', //根目录 assetsPublicPath: '/...
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 ...
Vue项目History模式404问题解决方法
12-01
Vue项目的History模式是一种基于HTML5 History API的路由方式，它使得单页面应用(SPA)的路由可以在浏览器的历史记录中进行操作，提供了更好的用户体验。然而，当项目使用History模式部署到服务器，尤其是Nginx服务器...
在nginx上部署vue项目(history模式)的方法
11-30
在Vue.js应用中，`vue-router` 是一个常用的路由管理库，它提供了两种导航解析模式：`hash` 和 `history`。默认情况下，Vue应用使用`hash`模式，URL会显示为`http://localhost:8080/bank/page/count/#/`的形式，其中...
48. 配置使用VUE - router 路由 和 修改路由模式为 histroy
Bi-Hu的博客
08-11 1473
使用路由大概步骤： 1.新建一个包含路由组件的vue项目，当然你也可以用命令安装： 命令安装路由【个人推荐直接新建脚手架的时候选中即可】： npm install vue-router --save 2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 导入路由对象，并且调用 Vue.use(VueRouter) -> 创建路由实例，并...
Vue2.0——修改路由模式(history)
HarryHY的博客
11-30 2652
在你的router里面的index.js中 new Router中添加 这个base可根据你的具体情况修改即可 mode: 'history', base: '/front/',
vue笔记-路由：修改history
qq_39179734的博客
08-11 460
export default new Router({ routes: [ { path: '/', name: 'myFirstvue', component: myFirstvue } ], mode: 'history' }) mode:"hash"; URL里面会有#号呀 mode:"history"; 有历史功能记录啦
vue-router路由模式设置history模式
weixin_42864357的博客
03-29 1381
vue-router路由模式设置history模式。
Vue-History模式
huotong
06-03 351
History模式 History模式一定要结合服务器 因为router默认是hash模式加载的 <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router...
Vue 项目中 history 路由模式的使用
lwaner的博客
07-10 1461
在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。
nginx 刷新显示404
lixilai_rjkf的博客
09-16 908
#nginx location / { try_files $uri $uri/ /index.html; } HTML5 History 模式 vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的history 模式，这种模式充分利用history.pushStateAPI 来完成 URL 跳转而无须重新加载页面。 const ro...
vue-router实现history模式配置
热门推荐
筑释科长的博客
02-09 1万+
一：概述 vue-router可以设置两种模式：hash和history const router = new VueRouter({ mode: "hash", // mode: "history", routes }); 如果使用hash模式，一般无需特殊配置； 但如果要使用history模式，则前端和服务端要做一定的设置； 使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务
Vue路由模式为history的项目部署到Nginx
jialiu111111的博客
04-12 2817
因为我们一般都是打包以后放在静态资源服务器中的，我们访问诸如 example.com/rootpath/ 这种形式的资源没问题，是因为，index.html 文件是真实的存在于 rootpath 文件夹中的，可以找到的，返回给前端的。再者，如果我们需要 js 文件，比如登陆的时候请求的地址是 example.com/rootpath/login/js/dist.js 其实我们想要的文件，还是 rootpath/js/ 目录中的 dist.js 文件而已。你如果之前有类似的经历，那么你肯定上网找过解决方案。
vue3路由mode改为history模式
最新发布
11-21
Vue3的路由使用Vuex Router库，将路由模式从默认的`hash`更改为`history`，可以提供更好的用户体验，因为`history`模式下URL不会包含`#`，路径看起来更清晰。以下是更改模式为`history`的基本步骤： 1. 安装依赖： 首先，在你的项目里安装vue-router的`history`版本： ``` npm install vue-router@next history ``` 2. 引入并配置： 在`main.js`或入口文件中，引入VueRouter，并设置`mode`为`history`： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; const router = createRouter({ mode: 'history', // 更改模式为'history' base: process.env.BASE_URL, // 根据实际环境设置base URL，如'http://localhost:8080/' history: createWebHistory(), // 使用web浏览器的历史API routes: [...], // 这里填写你的路由配置 }); // 将router挂载到App组件上 app.mount('#app'); ``` 3. 兼容处理： - 对于单页应用（SPA），需要服务器支持HTML5 History API，这意味着服务器需要返回完整的HTML页面，而不是仅返回`index.html`。 - 如果你的项目部署在Apache、Nginx等服务器上，需要添加相应的路由规则来处理`404 Not Found`情况，例如通过`.htaccess`或配置文件。 4. 注意事项： - `history`模式下的路由可能会导致SEO问题，因为搜索引擎通常不能抓取动态生成的内容。你可以考虑使用预渲染技术（如Prerender SSR）来解决这个问题。 - 在开发环境中，可能需要配置一个本地服务器（如`webpack-dev-server`）来模拟真实环境的行为。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追梦小狂魔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值