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
  • 1

没错,这样URL不再会有#号,你会发现整个地址栏回到了你熟悉的那个样子,不过,接下来介绍的就非常的重要了,可能很多刚入门的新人或多或少都会遇见这么一两个坑…

页面无法渲染

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

sdp.driver.com/driver/

会发现页面一片空白,但是静态文件都能够正常的引用,因为使用了YII中的模块,所以除了域名之外,还会带有driver模块名。一般很多人创建的项目都放在了根目录下面,也就是:

sdp.driver.com

这样的一种形式,没问题。可是如果配置了模块,或者放置在了子文件夹下面,那么就会出问题。其实,这是因为router无法找到路径中的组件,所以也就无法渲染了。只需要修改router中的index.js,在每个path中加上你项目名称就行了,这样就能够成功了。

index.js

最后的页面效果:

效果图

404错误

在History mode下,如果直接通过地址栏访问路径,那么会出现404错误,这是因为这是单页应用(废话)…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的,解决这个问题很简单,只需要在后台配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。具体配置如下:

Apache

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

nginx

location / {
  try_files $uri $uri/ /index.html; }
  • 1
  • 2
  • 3

Node.js (Express)

关于每次点击链接都要刷新页面的问题

众所周知,开发单页应用就是因为那丝般顺滑的体验效果,如果每次点击都会刷新页面…
出现这个的原因是因为使用了window.location来跳转,只需要使用使用router提供的方法,就能够解决这个问题:

在main.js中配置中将router绑定到全局

Vue.prototype.router = router;
  • 1

之后都使用如下的方式来控制跳转

this.router.push('driver/service');
  • 1

好啦,这次关于Vue路由的“坑”就介绍到这里了,以后会发表更多的优质文章,如果对你有所帮助,请点击赞,谢谢

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113680.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Parallel.For循环 和 Parallel.ForEach循环

    Parallel.For循环 和 Parallel.ForEach循环大多时候,我们的循环结构的每一次迭代依赖于上一次迭代的计算或行为。但是,有的时候又不是这样。如果迭代之间彼此独立,并且程序运行在多核处理器的机器上,如果能将不同的迭代放在不同的处理器上并行处理的话,将会受益匪浅。Parallel.For和Parallel.ForEach结构就是这样做的。一、Parallel.For1、Parallel.For方法有12个重载:publics…

  • 【实例分割】1、SOLOv1: Segmenting Objects by Locations_2019[通俗易懂]

    【实例分割】1、SOLOv1: Segmenting Objects by Locations_2019[通俗易懂]文章目录一、背景二、本文方法三、本文方法的具体做法3.1问题定义3.1.1Semanticcategory3.1.2InstanceMask3.2NetworkArchitecture3.3SOLOlearning3.3.1LabelAssignment3.3.2LossFunction3.4Inference四、实验4.1主要结果4.2HowSOLOwork……

  • ORACLE触发器(trigger)的使用

    ORACLE触发器(trigger)的使用1、触发器说明触发器是一种在事件发生时隐式地自动执行的PL/SQL块,不能接受参数,不能被显式调用2、触发器语法create[orreplace]triggertrigger_name{before|after|insteadof}trigger_eventon{table_name|view_name}[foreachrow]beginPL/SQL语句…

  • JavaScript匿名函数理解及应用[通俗易懂]

    JavaScript匿名函数理解及应用[通俗易懂]匿名函数匿名函数顾名思义就是没有名字的函数,在实际开发中经常会用到,也是JavaScript的重点。匿名函数又叫立即执行函数。由于这种函数是匿名的,所以它不能被调用。由于它不能被调用,所以如果它不立即执行的话就没有了意义。由于它需要立即执行,所以在执行完之后匿名函数就会被销毁。匿名自执行函数的作用就是用于闭包和创建独立的命名空间两个方面。匿名函数的基本形式为(function(){…})();前面的括号包含函数体,后面的括号就是给匿名函数传递参数然后立即执行。匿名函数的作用是避免全局变量

  • 打赏图片,怎么在csdn上上传图片,并添加到自定义栏目中[通俗易懂]

    打赏图片,怎么在csdn上上传图片,并添加到自定义栏目中[通俗易懂]打赏图片,怎么在csdn上上传图片,并添加到自定义栏目中

  • windows创建虚拟显示器_windows设置主显示器

    windows创建虚拟显示器_windows设置主显示器在开发或者办公中,越大的屏幕看起来就显示越舒服了,通常我们的做法是有两块屏幕,这样显示的内容就变多了,可以很容易提高办公的效率。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号