本地vue-router模式设置为mode:‘history‘时，页面空白，无法加载

最新推荐文章于 2024-08-08 17:20:54 发布

newBunny

最新推荐文章于 2024-08-08 17:20:54 发布

阅读量2k

点赞数 1

文章标签： vue-router

本文链接：https://blog.csdn.net/newBunny/article/details/110382461

版权

router 配置模式的地方，加一行代码

base: process.env.BASE_URL

const createRouter = () => {
  return new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: []
  })
}

酱婶er，即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

newBunny

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue build本地预览与路由History模式下页面空白

qq_45576685的博客

03-09

834

vue build本地预览与路由History模式下页面空白和图片路径找不到前言一、本地模拟服务器测试二、启动我们的本地预览服务器,执行npm run xx 类型的命令 vue build本地预览与路由History模式下页面空白和图片路径找不到前言不知道有没有前端小白和我一样，遇到同样的问题 vue 路由mode:‘history’ 模式下，开发环境页面可以正常访问，但是打包后本地测试出现问题（有没有人和我一样，本地测试也不会的，以前hash模式下，直接把dist文件夹下的index.html从浏览

vue-router 创建路由 mode模式：hash&&history

weixin_44486632的博客

10-01

732

vue-router

参与评论您还未登录，请先登录后发表或查看评论

vue-router设置mode为history页面报Cannot Get

qq_29055201的博客

03-29

3021

场景在开发环境中，觉得通过hash方式访问链接有点奇怪，就想使用history模式，于是在router/index.js设置： import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' Vue.use(VueRouter) const router = new VueRouter...

Vue之model属性

最新发布

weixin_42504805的博客

08-08

380

v-model其实是可以在组件上使用的，而且适用范围还是挺广的，尤其是在我们写组件的时候，相信很多人都有过在父组件展示一个子组件的行为，但是子组件里面有关闭整个组件的功能，，我们所做的就是在子组件当中通过$emit触发父组件对应的方法，改变父组件上v-if对应的变量控制显示隐藏。但是有了v-model，这一切都变得很简单，最主要的是完全少了自定义对外暴露的关闭的方法，如果你关闭之后需要回调，那么通过监听你的是否显示的flag即可，所以大可放心使用。

Vue-router本地服务器使用history出现找不到页面的问题解决方法

Dowen的博客

03-29

9825

       前两天本人使用 webpack 手动搭建了一个 Vue 项目，在设置 vue-rouer 的 history 后使用 router-link 跳转没有问题，但刷新页面后发现页面就找不到了解决方法：在 webpack.config.js 中，找到 scripts 自己配置的 webpack 服务...

vue-router 复用原有页面不会加载

小马哥的天涯

05-20

949

vue-router 复用原有页面不会加载有的时候我们在使用 v-router时候只是修改 params或者query参数值的时候页面不会重新加载因为路由是一样的规则 vue则会认为是一样的页面然后就是复用该页面而不是重新加载导致我们在生命周期钩子如 created 、mounted中调用一些方法等不起着用这个时候我们就需要使用 vue...

@vue-cli 开发环境history模式刷新加载资源失败问题

weixin_43368335的博客

07-08

1018

history下当路由是嵌套路由时，若vue.config.js的publicPath=‘./’时，刷新页面请求资源地址会以相对路径的形式加载从而报错此时可修改publicPath = ‘/’ 这样在history模式下刷新请求的地址为根路径，即成功如果是hash 请求地址固定为根路径，所以不会出现问题也可以动态修改 ...

vue-cli + router生成的项目，当mode为history时，直接在url中输入地址页面访问404，或者刷新页面后404

c2311156c的博客

08-30

5865

有的时候，业务中会有一些需求，直接在其他地方，比如邮件中提供系统链接，通过点击一个url直接跳转到我们的系统中来。在本地开发时，直接输入对应的url就可以访问，但是当项目部署在服务器之后，直接输入url就会报错404，这是因为router本身提供的就是一个虚拟路径，通过router内部的机制进行页面跳转和参数传递的，实际项目中根本不存在此路径对应的资源。对应此问题，尤大在官网上也提到过，...

vue-router-h5-history:vue-router的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

05-17

vue-routerHTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时，URL...

VUE 解决mode为history页面为空白的问题

10-16

总结，解决Vue Router `mode: 'history'`导致的页面空白问题，关键在于前端和后端的配合。前端配置`webpack-dev-server`的`historyApiFallback`，而后端配置能捕获所有未知路径并将它们重定向到`index.html`。通过...

vue vue-Router默认hash模式修改为history需要做的修改详解

10-18

要将 Vue Router 的模式从 Hash 更改为 History，首先在 `router/index.js` 文件中找到 `createRouter` 或类似的初始化配置，将 `mode` 属性改为 `history`： ```javascript const router = new Router({ mode:...

解决vue-router进行build无法正常显示路由页面的问题

08-27

在默认情况下，Vue-Router的mode配置项被设置为"history"，这将导致路由页面无法正常显示。三、解决方法解决这个问题的方法是将Vue-Router的mode配置项设置为"hash"。这样，路由页面将可以正常显示。四、代码...

vue-router实现history模式配置（生产环境路由失效跟刷新404问题）

马云

07-27

1344

使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务端没有做相应的配置。location/test-daily表示项目部署在了/test-daily目录下，这里要跟vue.config.js里的publicpath的值保持一致。原文链接https//blog.csdn.net/ZhushiKezhang/article/details/122843264。test-daily是你是项目包名。...

Vue路由History mode模式中页面无法渲染的原因及解决

热门推荐

07-08

7万+

Vue下路由History mode导致页面无法渲染的原因用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。一般开发的单页应用的URL都会带有#号的has

vue2路由中router-view不显示的原因及踩坑记录

阿牛哥的博客

07-04

3533

vue2路由中router-view不显示的原因及踩坑记录

Vue在history模式下页面空白及404解决

qq_39762109的博客

04-02

2099

vue路由有两种模式一种hash（vue-router默认模式）另一种history路由改变为history模式： export default new Router({ mode: 'history' }）由于改变了vue路由模式为history，导致页面空白返回404 假如有这样一个测试的访问地址：127.0.0.1/h5/home 可以访问到项目下的home页面官方解释histor...

vue3怎么把路由的 # 去掉？为什么用mode: ‘history‘没有生效？

weixin_49066399的博客

07-04

1221

代码完成后请重启项目一定要重启！重启！重启！（没重启项目不生效）

vue系列：当vue路由配置history模式页面加载不出来的bug

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

08-22

4270

概述在vue中，当你路由配置 history 模式的时候，在你本地跑 localhost:8080 的时候没有问题，但是当你把 index.html 给后端，让他链接上你的 dist 文件的静态资源的时候，可能会出现页面加载不出来也不报错的情况。解决方案比如这时地址是 https://e.mytest.cn/example，你的路由是在 example 之后拼接的。方法一：你需要让后端在 ...

在vue预渲染项目在history模式下刷新无法正常页面

weixin_44781409的博客

05-29

3570

在vue预渲染项目在history模式下刷新无法渲染页面的问题刷新css样式不生效报错404 const router = new Router({ mode: 'history', routes: [ { path: '/', component: mall, name: 'mall' ...

Vue-router使用详解：解决空白页问题与路由对象属性

在创建Vue-router实例时，可以通过`mode`选项设置模式，例如： ```javascript const router = new Router({ mode: 'history', routes: [...] }); ``` 出现空白页可能是由于多种原因，比如组件未正确加载、路由...