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

解决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}
   ]
  }
   ……
 ]
})

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

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

二. 异常解析

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

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

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

三. 解决问题

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

修改前：

<script src="./static/js/stomp.js"></script>

修改后

<script src="/static/js/stomp.js"></script>

四. 原理

./ 是指用户所在的当前目录（相对路径）；

/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；

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

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

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

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

您可能感兴趣的文章:

  • Vue.js路由组件vue-router使用方法详解
  • Vue.js路由vue-router使用方法详解
  • vue-router单页面路由
  • vue router路由嵌套不显示问题的解决方法
  • vue router2.0二级路由的简单使用
  • vue-router路由懒加载和权限控制详解
赞 (0)

相关推荐

  • vue router2.0二级路由的简单使用

    本文实例为大家分享了vue router2.0二级路由的具体代码,供大家参考,具体内容如下 1.app.vue中 <template> <div id="app"> <router-view></router-view> </div> </template> 2.router中index.js(路由的路径配置) import Vue from 'vue' import Router from 'vue-router

  • vue router路由参数刷新消失问题的解决方法

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • vue-router单页面路由

    vue中,有一个类库叫做vue-router,是用来做单页面路由的.做路由一般分为四个步骤: 准备一个根组件 vue.extend(): 需要做路由的内容准备 template: 准备路由 new VueRouter(): 关联路由   map 启动路由 start(App,'#box')://第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址:https://github.com/vuejs/vue-router 关于路由跳转的简

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • Vue.js路由vue-router使用方法详解

    Vue.js路由vue-router使用方法详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

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

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

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • Vue Router嵌套路由(children)的用法小结

    Vue Router嵌套路由(children)的用法小结

    目录 简介 使用场景 官网网址 示例 路由配置 用户页面(父页面) 子路由的path前加“/” 简介 说明 本文介绍Vue Router的嵌套路由的用法. 嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link.router-view),通过配置children可实现多层嵌套.(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变). 使用场景 嵌套路由用于实现页中页效果.例如: 用户页面中,有登录页面和注册页面,这

  • VUE的history模式下除了index外其他路由404报错解决办法

    我们先来看下代码: location / { index index.html; root /dist; try_files $uri $uri/ /index.html; } try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配. 然后去到网站目录下去查找文件是否存在,如果存在直接读取返回.如果不存在直接跳转到第三个参数. 现在不明白的是既然跳到了index为什么显示的还是路由后的界面 内容扩展: 问题背景: vue-router 默认是hash

  • 针对Vue路由history模式下Nginx后台配置操作

    前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; } 经测试,可以正常访问 补充知识:Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间,因Vue的Rou

  • vue.js Router嵌套路由

    vue.js Router嵌套路由

    前言: 有时候在路由中,主要的部分是相同的,但是下面可能是不同的.比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message.这时候就需要使用到嵌套路由. 项目结构如下: 我们创建了3个组件,分别是Home.vue,HomeNews.vue,HomeMessage.vue,代码如下: Home.vue <template> <div class="home"> <h1>Home</h1> <router

  • vue router动态路由下让每个子路由都是独立组件的解决方案

    vue router动态路由下让每个子路由都是独立组件的解决方案

    vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r

  • vue多页面项目中路由使用history模式的方法

    前言 之前写了一个vue项目中需要添加一个打印的页面,需要使用多页面的模式进行开发,vue-cli3出初始化的项目配置多页面还是很容易的,但是发现print.html没有办法配置history模式的路由,一旦使用history模式的路由.写了一个简单的demo在网上寻求帮助没有能解决问题,后来没有办法只能使用hash模式完整项目了. 如何解决 有一天看webpack文档的时候,突然看到了historyApiFallback配置项,一瞬间感觉找到方法了.下班后回家就下载下之前的项目折腾了. 之前的

  • Vue三层嵌套路由的示例代码

    Vue三层嵌套路由的示例代码

    Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染): Demo访问时路径:http://IP:端口/#/routers/ 1.建立案例文件夹 page/routers/ 1 routers/index.vue <template> <div> <router-link :to="{name: 'rindex_rhome'}" class="rlink&

  • Vue单页式应用(Hash模式下)实现微信分享的实例

    本文介绍了Vue单页式应用(Hash模式下)实现微信分享的实例,分享给大家,具体如下: 前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js. 请注意,如果你的页面启用了ht

  • vue多层嵌套路由实例分析

    vue多层嵌套路由实例分析

    本文实例讲述了vue多层嵌套路由.分享给大家供大家参考,具体如下: 多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></scri

随机推荐