详解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中加上你项目名称就行了,这样就能够成功了。
最后的页面效果:
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>
nginx
location / { try_files $uri $uri/ /index.html; }
Node.js (Express)
关于每次点击链接都要刷新页面的问题
众所周知,开发单页应用就是因为那丝般顺滑的体验效果,如果每次点击都会刷新页面…
出现这个的原因是因为使用了window.location来跳转,只需要使用使用router提供的方法,就能够解决这个问题:
在main.js中配置中将router绑定到全局
Vue.prototype.router = router;
之后都使用如下的方式来控制跳转
this.router.push('driver/service');
好啦,这次关于Vue路由的“坑”就介绍到这里了,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- python处理json数据(复杂的json转化成嵌套字典并处理)
- Pointer-network理论及tensorflow实战
- python3 log文件处理获取某天需要的数据
- 实战深度强化学习DQN-理论和实践
- Python 工匠:编写条件分支代码的技巧
- python3 下 Zabbix监控调用graph.get并且下载监控图
- 用R语言复盘美国总统大选结果~
- 最新Apache Spark平台的NLP库,助你轻松搞定自然语言处理任务
- 使用Seq2Seq+attention实现简单的Chatbot
- R语言可视化——用ggplot构造期待已久的雷达图
- 【实战】最新Deep Learning with Keras图书加代码,教你从零开发一个复杂深度学习模型(附下载)
- 基于zabbix 自动抓取每天监控数据!/usr/local/python/bin/python3.5
- 大过年的,一起来用Seq2Seq来作对联吧!
- python3 下调用zabbix api 获取多个机房的IP
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter实现用视频背景的登录页的示例代码
- Flutter实现可循环轮播图效果
- Android判断登录情况
- linux尝试登录失败后锁定用户账户的两种方法
- Linux内存泄漏检测shell脚本
- 详解Linux系统中网卡MAC地址克隆方法
- linux下日志定时轮询的流程详解
- Vim中查找替换及正则表达式的使用详解
- CentOS 7下部署php7.1和开启MySQL扩展的方法教程
- Ubuntu系统下用Crontab命令定时执行PHP文件详解
- CentOS7 LNMP+phpmyadmin环境搭建 第三篇phpmyadmin安装
- Linux有限状态机FSM的理解与实现
- Linux下浅谈crond与crontab的命令用法
- centos 7系统下安装Jenkins的步骤详解
- linux tomcat配置https的方法