详解Vue路由Historymode模式中页面无法渲染的原因及解决 - CSDN文库

151 浏览量更新于2023-03-16 1 收藏 96KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

主要介绍了详解Vue路由History mode模式中页面无法渲染的原因及解决，非常具有实用价值，需要的朋友可以

参考下

Vue下路由下路由History mode导致页面无法渲染的原因导致页面无法渲染的原因

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把

vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲

染。如果因为业务需要，或者单纯是觉得带#号不美观，那么可以使用history模式，简单而言就是在router的配置文件index.js

中添加如下一行代码：

history: mode

没错，这样URL不再会有#号，你会发现整个地址栏回到了你熟悉的那个样子，不过，接下来介绍的就非常的重要了，可能很

多刚入门的新人或多或少都会遇见这么一两个坑…

页面无法渲染页面无法渲染

这里以我写的一个项目为例子，当我开启history模式的时候，我并没有对路由进行任何处理，在Dev阶段一切都是正常的，可

是打包之后，访问项目路径：

sdp.driver.com/driver/

会发现页面一片空白，但是静态文件都能够正常的引用，因为使用了YII中的模块，所以除了域名之外，还会带有driver模块

名。一般很多人创建的项目都放在了根目录下面，也就是：

sdp.driver.com

这样的一种形式，没问题。可是如果配置了模块，或者放置在了子文件夹下面，那么就会出问题。其实，这是因为router无法

找到路径中的组件，所以也就无法渲染了。只需要修改router中的index.js，在每个path中加上你项目名称就行了，这样就能够

成功了。

最后的页面效果：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38729269

粉丝: 4
资源: 851

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈