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.
Related
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 "/"
This issue has been discussed several times (1 - 2) but I still cannot get it to work. I'm transitioning our project to use vue in some parts. What I want to accomplish is:
If url starts with /v/, look into vue router and match path.
If url starts with anything other than /v/, ignore it (this view will be rendered by current framework from backend).
My router looks like:
const router = new Router({
base: '/v/',
mode: 'history',
routes: routes
});
Where routes are:
const routers = [
...
{
path: '/wholesale-catalogue/',
name: 'wholesale-catalogue',
component: () => import('./views/WholesaleCatalogue.vue')
}
...
]
The second option I tried is nesting the children routes:
const router = new Router({
mode: 'history',
routes: [
{ path: 'v', component: BaseView, children: routers }
]
});
The problem is that the router reroutes non /v/ urls into /v/ when clicked within the website, such as:
ourwebsite.com/home/ -> has some links on it, such as /about/. When you click on /about/ it actually goes to ourwebsite.com/about/ for a few seconds but then the url changes to /ourwebsite.com/v/about/. This leads to some annoyances as when you refresh the website, this url doesn't exist (on our current backend framework) so it will not render.
i'm making static site with laravel and vue.js. I make
Route::get('/', function () {
return view('layouts.master');
});
this route enter code hereto load home page and
import VueRouter from 'vue-router'
import home from './components/home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/about', component: About },
{
path: '/',
component: home
},
{
path: '/contact',
component: Contact
}
]
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`,
})
its my appp.js code. First time when page loaded on localhost:8000 the home page works fine but when i click to somme other route and come back it does not work it shows me blank page . but i can see html page by inspecting.
It sounds like history mode is not configured correctly on the server side.
As a test, change this:
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`,
})
...to this:
const router = new VueRouter({
//mode: 'history',
routes, // short for `routes: routes`,
})
If it works, it means your server side is not set up properly for Vue History Mode and you'll need to configure your server side to allow for history mode.
Example 1
Example 2 - scroll down a little more than half way to "The Server-Side" section
I am trying to dynamically pass in data to set the base for vue-router. Is it possible to setup a separate function elsewhere that passes in a base name variable? For example, if an editor wanted to set the base name via a CMS, I’d want a way to pass (or import) that name through.
// router/index.js
export default new VueRouter({
base: '[PASS BASE NAME HERE]',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
],
mode: 'history'
})
I ended up setting a variable on my index.html and importing it to the router. This can also be done by importing a variable from a module js file, but setting it on the html seems to avoid build issues. Simpler solution than I thought, thanks #lamelemon.
// index.html
var serializedModel = #Html.Raw(Model.Serialized());
// router/index.js
var baseUrl = serializedModel.BaseUrl;
export default new VueRouter({
base: baseUrl,
mode: 'history',
routes: [{...}]
})
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