My current URL is like domain/main.html#/ => This loads my home page
I want my URL to be free from '#' i.e. domain/main.html/
const router = new VueRouter({
mode: 'history',
routes,
)}
I read articles and answers on StackOverflow, youtube, etc and they all said the same thing that mode: 'history' would solve the issue and yes it does but my routes are not working. All of them are showing => Cannot GET domain/main.html/
I dug a little more and it says to catch the not found fallback using
{ path: '*', redirect: '/' }
I tried this but still not working.
{ path: '*', redirect: '/' }
but this time it opens my page but images and scripts are not loading this time, and if I reload again I get the same Cannot GET Error.
Any Help to solve this issue would be highly appreciated. Thanks in advance.
Your HTML file should be named index.html, so you have "domain.com/" and not "domain.com/main.html".
If you want to continue to use main.html as the HTML file name, you should config your server to respond always with that file.
But I suggest you rename the HTML file to index.html
Related
I'm new to Stack Overflow, I'm new to Vue.js, so please forgive me if I'm doing something wrong in advance :)
I'm building an application that has only main component, which is in my root directory (/index.html). Based on a name passed to the path, this component loads a json with the same name and serves the SPA based on it (important: it does not render the pure json, it uses the json to mount a SPA and this part is working fine). So the paths could be any of the following (they're always dynamic):
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*foo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*bar*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherfoo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherbarandsoon*
It works fine when I run on dev, but when I build it to S3 I get a 404 saying that it can't find "foo" path. The fastest workaround was to set my error page to "index.html" on S3, but of course this isn't a good idea as I always get a 404 (the page renders correctly though, even if I don't get a 200 or alike)
I did some research (maybe not enough, sorry :() and found this code:
const router = new VueRouter({
base: __dirname,
mode:'history',
routes: [
{
path: '*',
redirect: '/index.html'
}
]
});
var vm = new Vue({
router,
el: '#app',
render: h => h(App)
});
global.vm = vm;
I get no compilation errors and it runs fine... until I put it on S3. Same problem then: 404.
So, the question is: what am I doing wrong?
As I wrote above, it seems that S3 by itself doens't handle these requests correctly. The solution was to use Cloudfront, which has more ways to deal with error handling and rewriting response codes - I configured it to catch 404 errors and rewrite them to 200.
Whenever I try to use a simple
<router-link to="https://google.com">
Google
</router-link>
it renders the link to http://localhost:8080/https:/google.com
router.js
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
)}
and I have no .env file. Whenever I create the .env and add BASE_URL=http://localhost:8080 it renders http://localhost:8080/http:/localhost:8080/https:/google.com
Have anyone experienced this issue?
UPDATE
The example above reflects external websites but this is also happening with internal links. Example:
<router-link avatar :to="{name: 'author', params: {id: author.id, name: author.name}}"> foo </router-link>
definition author's route
{
path: '/author/:id/:name',
name: 'author',
component: Author
},
Everything was working okay some days ago but there must be something I added that changed this behaviour. I have looked everywhere but can't seem to find where all went wrong.
Yes, use a normal a href tag for external links. Vue-router and router-link are primarily for instance resources.
This problem could be from your router. I'm guessing the process.env.BASE_URL would be http://localhost:8080. I faced similar problem then I ended up here. Unfortunately, the step above by #screll didn't solve my problem. What I did was to change the baseUrl.
Change the baseUrl in your router to '/' instead of http://localhost:8080.
For clarity, These are the steps depending on the project setup, either vue/cli or webpack setup
// .env file
BASE_URL=/
# or VUE_APP_BASE_URL=/
Then, Router
// NB: The BASE_URL is '/'
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
// or base: process.env.VUE_APP_BASE_URL,
routes
)}
Do not forget to put "/" in your routes. Hence, it will just change the last segment of your url.
Without "/"
With "/"
I'm getting some issues when trying to redirect to an external link.
for ex:
{ path: '*', redirect: 'https://google.com'}
when I use "redirect" it doesn't work completely, but when I use something like that
{ path: '/*',
beforeEnter(to, from, next) {
window.location = "https://google.com"
}
}
it works but there is a problem because first, it tries to render App component again but there is no component so be empty and a blank page is being rendered for nearly 1-1.5 second then it redirects to target URL and I don't want it to reload App component, just redirect it to other link. I googled but found nothing noteworthy.
Or maybe is there another way like deactive a component or use v-if or directly rendering a html file?
redirect is meant to redirect to another route defined by your application, not to go to another website directly.
window.location works, but I think the behavior is somewhat browser-dependent.
I have a Vue.js project with the following router:
import Vue from 'vue';
import Router from 'vue-router';
import Overview from '#/components/Overview';
import Experiment from '#/components/ForExperiment';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
redirect: 'test',
},
{
path: '/overview',
component: Overview,
},
{
path: '/overview/from/:from/to/:to',
name: 'overview',
component: Overview,
},
//... some other urls goes here.
{
path: '/test',
name: 'test',
component: Experiment,
},
],
});
If I open http://localhost:8080 in a browser I am redirected to http://localhost:8080/#/test. Why not just http://localhost:8080/test? Where does the '#' symbol come from?
And why if I open http://localhost:8080/test am I redirected to http://localhost:8080/test#/test?
And what is even more strange, if I open http://localhost:8080/overview I am redirected to http://localhost:8080/overview#/test, so the Overview component is not displayed.
What can cause these strange effects?
Vue router has different modes. The default mode when a browser is detected is hash. The current route is determined by the hash part of the url. The upside of this approach is that no serverside configuration is required. All urls point at the same resource (e.g. the route), which you can make your index.html file.
You can change this mode to history. The history mode uses the history api of the browser. It will only work in recent browsers, but support should not be an issue at this point. It will also require server side configuration in that you need to internally rewrite your router urls to the same file. If you would not do that, refreshing the page will show a 404 page instead of the page you want to see.
vue-router default mode is hash mode, that is why you see a # on your URL. It uses the URL hash to simulate a full URL without reloading the page if it changes.
To get rid of the hash, we can use vue-router history mode. Change the mode like so:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
This leverages the History API.
If you want to use the history mode, you'll need to change your server configuration. Vue Router docs has some examples here.
The vue router defaults to hash mode. For your url to go to http://localhost:8080/test you need to go into history mode. This is done because by default web servers are not setup to redirect all requests to one html file. hash mode is used to per the docs:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
Change your router to this to get history mode. But you will need to configure NGINX or Apache2 to redirect all requests to your vue code
const router = new VueRouter({
mode: 'history', // Add this to your router
routes: [...]
})
I am new to vuejs. For my Vuejs application, I cannot access url like '/foo/apple' in the web hosting server, after I run the "npm run build". It shows error 404 I am using the HTML5 History Mode,(https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations) and I implemented the "connect-history-api-fallback" like below in dev-server.js:
const express = require('express')
const app = express()
app.use(require('connect-history-api-fallback')())
My router/index.js
export default new Router({
mode: 'history',
{
path: '/Product',
name: 'Product',
component: Product,
},
{
path: '/Product/kraftbag',
name: 'Kraftbag',
component: Kraftbag
},
});
my website http://americandunnage.n55lwi.info/.
I have looked for a lot of posts regarding to this problem, but I still can find the solution.
you are likely missing the hashbang (#)
try #/foo/apple instead of /foo/apple
The default setting of the vue router is to use the hashbang method. This relies on using the index.html (or whatever defaults to / url) page, because everything after it is not taken as part of the url location but passed into the application. For example, in an anchor 1st heading this will go to a part of the page, and if you're already on that page, you will not be redirected.