使vue-router 链接变为history模式

最新推荐文章于 2024-12-10 23:37:37 发布
原创 最新推荐文章于 2024-12-10 23:37:37 发布 · 190 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #linux #javascript

文章描述了如何在使用VueCLI构建的项目中，修改router/index.js文件以启用history模式，以便实现单页面应用的无缝导航。

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

​
export default new Router({
  routes: [
    {
      path: '/',
      component: layOut,
      children:[
        {
          path:'/home',
          component:Home
        },
        {
          path:'/about',
          component: () => import('../views/About.vue')
        }
      ]
    }
  ],
  mode:"history"
})

​

在vue-cli 构建的项目中 打开文件router/index.js
加上：mode:"history"

vue-router四版本-适用vue3
weixin_68658847的博客
04-10 4839
vue-router四版本-适用vue3
vue-router实现原理、理论知识和实践详情
最新发布
大模型大数据攻城狮的专栏
07-04 733
这一章咱们将深入Vue Router的源码（基于4.x版本），剖析它的核心实现逻辑，从路由初始化到导航流程，再到组件渲染。别担心，我会用通俗的语言带你啃这块硬骨头，配上代码片段和注释，让你既能看懂源码，又能把思路用到自己的项目里！不过，它实现起来比Hash模式复杂点，咱们来一探究竟。比如，路由规则/user/:id会被转成正则^/user/([^/]+)，其中[^/]+匹配任意非斜杠字符，提取为参数id。Vue Router的核心任务是监听URL变化，然后根据配置的路由规则，动态渲染对应的组件。
vue-router 将默认的哈西模式改为history模式
秋来九月八
11-05 3428
主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。不涉及浏览器 URL，而是直接操作路由历史栈。});默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。
介绍Vue router的history模式以及如何配置history模式
m0_62396648的博客
07-08 1万+
history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。在history模式下，URL看起来更加整洁，没有#符号。例如，history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验。
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 文件而已。你如果之前有类似的经历，那么你肯定上网找过解决方案。
vue-router的两种模式的区别
10-16
对于hash模式的路由变化，Vue-router会创建一个hashHistory对象，提供了push和replace方法来操作浏览器的历史记录栈。 HTML5提供了两个新的API：pushState和replaceState。这两个API允许我们修改浏览器地址栏的URL...
vue-router 路由详解
大学生小郑的博客
07-21 1464
vue-router 路由详解
vue-router history模式下的微信分享小结
08-27
这是因为我们使用了vue-router history模式，导致自定义分享页面变成当前页，而不是进入页。为了解决这个问题，我们可以使用hash模式做成多页应用，每个页面都是进入页，或者使用替换<router-link>，跟2类似，使所有...
vue vue-Router默认hash模式修改为history需要做的修改详解
10-18
今天小编就为大家分享一篇vue vue-Router默认hash模式修改为history需要做的修改详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3.0路由将哈希(hash)更改为历史(history)模式
IU
04-03 1960
Vue3.0路由将哈希(hash)更改为历史(history)模式
48. 配置使用VUE - router 路由 和 修改路由模式为 histroy
Bi-Hu的博客
08-11 1473
使用路由大概步骤： 1.新建一个包含路由组件的vue项目，当然你也可以用命令安装： 命令安装路由【个人推荐直接新建脚手架的时候选中即可】： npm install vue-router --save 2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能) 导入路由对象，并且调用 Vue.use(VueRouter) -> 创建路由实例，并...
路由hash模式改成history模式的前端vue配置与后端配置
WanweI897的博客
01-06 4485
Web/static/ 表示项目部署路径，每个人的路径不一样，vue默认路径是根路径/，如果你项目不是部署在根路径，那就需要修改一些配置。history模式需要后端配合，具体的后端配置可以在网上找到，方法是获取不到资源时将url重写到 /index.html。特别注意的是，如果你的项目没有部署在根路径，那么你需要写入完整路径，例如 /Web/static/index.html。1.配置路由history模式并配置base。index.html 表示项目入口文件。/index 表示项目首页的路由地址。
vue中路由切换history模式
bobo979520的博客
03-12 1038
import { createRouter, createWebHistory, } from 'vue-router' // 在这里引入createWebHistory const routes = [ { path: '/', name: 'Home', component: Home }, { .... } ] const router = createRouter({ history: createWebHistory(), // 在调用 creat
Vue路由模式设置为history，nginx的配置
小火车况且况且况且的博客
08-05 1165
Vue路由模式设置为history，nginx的配置 1. Vue的路由模式设置为history const router = new Router({ mode: 'history', routes: routes, }) 2. nginx的配置，主要就是添加try_files $uri $uri/ /index.html; http { include mime.types; default_type application/octet-stream;
VUE项目地址自动添加#
kj85855的博客
10-17 1203
原因：vue路由默认是hash，改成history模式 解决方法：在router文件下的index.js添加 export default new Router({ mode: 'history', routes: [ { path: '/test', name: 'test', component: () => import('./....
vue项目，页面刷新就404了
m0_74823705的博客
12-10 1334
history模式：需要在服务器端配置，确保所有路由都重定向到index.html。hash模式：更简单，不需要服务器端配置，但 URL 中会有。根据你的项目需求和服务器环境选择合适的解决方案。
VUE 配置history路由模式配置
yh4494的博客
04-07 4611
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式要玩好，还需要后台配置支持。
掌握Vue.js路由管理：深入理解vue-router
import VueRouter from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值