CODEWITHSUNDEEP
vue.jshttpvuejs2vue-router
BeeLee
BeeLee

Reputation: 193

Reload routes not working with Vue Router

I just finished to build my portfolio on Vue.js 2 and went live. I have three views. When I reload the home view it's ok but on the two other ones I have several error messages.

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. Work:30 A parser-blocking, cross site (i.e. different eTLD+1) script, No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website.com' is therefore not allowed access. The response had HTTP status code 403.

It's the first time for me to go live with a single page webapp architecture. Any idea to fix this please?

Here is the router file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import Work from '@/views/Work'
import About from '@/views/About'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/Work', component: Work },
    { path: '/About', component: About }
  ]
})

Upvotes: 2

Views: 8500

Answers (3)

rozsazoltan
rozsazoltan

Reputation: 7696

As mentioned earlier, the Vue Router documentation also states that on your own web server, you need to redirect all incoming requests to a single file—the index.html file of your Vue project. This way, whether the request is http://example.com/first-page or http://example.com/second-page, etc., Vue will start running through index.html, allowing Vue Router to interpret the current URL and determine whether the "first" or "second" page has been requested.

Apache

You can achieve this in different ways depending on the web server you are using. With Apache, the .htaccess file is responsible for redirecting incoming requests to the appropriate file. This file should be placed in the folder to which the incoming requests for your domain are directed.

<IfModule mod_negotiation.c>
  # Disable MultiViews to prevent content negotiation issues
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  # Enable URL rewriting
  RewriteEngine On
  RewriteBase /

  # Don't rewrite requests for the index.html file
  RewriteRule ^index\.html$ - [L]

  # If the requested file doesn't exist, continue rewriting
  RewriteCond %{REQUEST_FILENAME} !-f
  # If the requested directory doesn't exist, continue rewriting
  RewriteCond %{REQUEST_FILENAME} !-d

  # Redirect all other requests to index.html
  RewriteRule . /index.html [L]
</IfModule>

Other

Upvotes: 0

webnoob
webnoob

Reputation: 15934

Take a look at the example configurations on the Vue Router website. They often fix issues that happen server side when all is in dev.

Upvotes: 6

primegxy
primegxy

Reputation: 1858

In some special cases, this trick will not work, like when your project is in the subfolder on your domain.

For that, you have to add these lines. Replace your subfolder name with

{Your sub folder name}

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /{Your sub folder name}/index.html [L]

Only apply to apache. Message me if you need any help for deploying you app on apache.

Upvotes: 2

Related Questions