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

最新推荐文章于 2024-11-29 01:21:35 发布

原创最新推荐文章于 2024-11-29 01:21:35 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#History mode #页面无法渲染 #页面空白 #vue

vue2.0系专栏收录该内容

6 篇文章

订阅专栏

在Vue.js的Vue-router中，使用History模式会导致URL无#号但可能出现404错误。当直接输入地址栏路径时，由于history.pushState的操作，页面无法正常渲染。解决方法是在服务器配置中，将所有未匹配到的请求重定向到index.html，确保路由由Vue-router处理。对于Apache服务器，需要进行特定的配置设置。

Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。一般开发的单页应用的URL都会带有#号的hash模式，因为整个应用本身而言就只有一个HTML，其他的都是通过router来渲染。url带#号会带来很多bug，例如：微信分享和微信支付配置等传的url是不含#号的，那么可以使用history模式，简单而言就是在router的配置文件index.js中添加如下一行代码：

export default new Router({
mode:"history",//此处添加
routes: [ 
{
path: '/error',
name: 'error',
component: require('../components/view/error'),
meta: {
title: '操作失败'
}
}

]

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;
}