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 "/"
Related
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
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.
As par documentation of base option:
The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".
But I have tried it like following, It does not seems to work:
const router = new VueRouter({
base: "/app/",
routes
})
Demo fiddle.
The base has a default value of '/'. Drawing analogy from how it is used to route:
<router-link to="home">Home</router-link>
or
<router-link :to="{ path: '/abc'}" replace></router-link>
I just omitted the /app and it works. The base doesn't need to be part of the router-link
EDIT
Use of base in vue-router
(For this test I had used vue-cli with the webpack template.)
I had my router configurations like so:
export default new Router({
base: '/app',
mode: 'history',
routes: [
{
path: '/',
name: 'RangeInputDemo',
component: ComponentDemo
}
]
})
Adding base as '/app' made no difference to the routing that happened throughout the project, as if the base was still set to '/'.
I tried to change the url from the server side (the url at which the project is being served).
So in dev-server.js where :
var uri = 'http://localhost:' + port
controls the url of the app, I made a slight modification to:
var uri = 'http://localhost:' + port + '/app'
This caused the application to show:
Notice the fullPath being '/' in the vue console (second image).
Just for double checking, I changed the base to '/' again.
So, the base property of the router configuration is to set the base url as set by the server, if the server serves the application at a route other than '/' then the base can be used for having the application be run from the set url.
Since the question requires the routes being moved under /app, I think having /app as the parent route would be the solution in that case, if the server isn't supposed to change the route on which it serves.
In the Vue Router 4, you set base path by history api:
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
Then each path would be prefixed with process.env.BASE_URL
Had the same problem, setting "base" didn't work - workaround is to update base url in router:
{ name: 'listings', path: baseUrl + '/listings', component: PageListings}
and refer to routes by name:
<router-link :to="{ name: 'listings' }" exact>Listings</router-link>
I created a redirect on the base path to another route.
{
name: "Default",
path: '/',
redirect: { name: 'OtherRouteName' }
}
Reference:
https://next.router.vuejs.org/guide/essentials/redirect-and-alias.html
For some reason my vue-router breaks links.
For example, when I setup <router-link to="/user/bar">... I've got this in url:
/http:/siteexample.com/user/bar
this should be http:// instead /http:/
So, why urls are not formatted properly?
My routes example:
var routes = [
{path : '/user/', component: Network},
{path : '/user/foo', component: Foo},
{path : '/user/bar', component: Bar},
{path : '*', component: Notfound}
];
var router = new VueRouter({
mode: 'history',
routes: routes
});
UPD:
Actually its ok, but problem was - my urls becomes like that: http://siteexample.com/http:/siteexample.com/user/bar
I've replaced this line in vue-router.js
pushState(cleanPath(this$1.base + route.fullPath))
to
pushState(cleanPath(route.fullPath))
in
https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.js#L1682-L1690
And now all works fine, but I'm not sure - is this is a bug or not.
The problem was - <base href="/"> tag in head.
Remove it and all will be fine.