解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下

一. 异常描述

本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置:

location / { try_files $uri $uri/ /index.html; }

vue-router使用history模式+使用嵌套路由:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……

  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路由页面就出异常了:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

页面样式全乱了,看下页面请求加载的静态文件,所有静态文件都是404;

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

二. 异常解析

1. 看下官方文档对嵌套路由的说明:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

2. 再看之前的异常页面,看来我们的父路由成了根目录了看下文件路径了:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

3. 看下我们引入这些异常文件,是在index.html文件中直接引用的,也就是在根路径下引入的。之前的hash模式下,根路径是不会变的,所以我们在index.html文件中直接引入这些静态文件,是可行的,但是使用history模式后,根路径就不固定了。那么这种引入方式就不可行了,所以才造成了上边出现的页面无法渲染的问题:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

三. 解决问题

这里有点尴尬,先考虑的主Vue中以Import的方式引入静态样式文件,的确可行,但是最后发现,直接修改index.html文件中的静态文件引入路径就OK了:

修改前:

<script src="/UploadFiles/2021-04-02/stomp.js">

修改后

<script src="/UploadFiles/2021-04-02/stomp.js">

四. 原理

./ 是指用户所在的当前目录(相对路径);

/ 是指根目录(绝对路径,项目根目录),也就是项目根目录;

对于hash模式,根路径是固定的,就是项目的根目录,但是history模式下,以/开头的嵌套路径会被当作根路径,所以使用“./”引入文件,就会找不到文件了,因为文件本身就是在项目根目录下的,并不在嵌套路径这个目录下。

总结,无论hash模式还是history模式,可以直接使用“/”从项目根目录引入静态文件。

PS:之前一段时间就遇到过这个问题,百度了好久,发现很少有人问这个问题,有一个也没人回答。也问了好些前端大神,还是没能解决这个问题。也许是平时写惯了“./” 和“../”这些开头的路径了吧,并没有注意到静态文件引入方式的问题,折腾了好些方法,最后很尴尬的发现,其实问题很简单,只是对框架的底层了解不透彻罢了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
vue,router,路由

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。