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
Related
I am currently building a module for a CMS (Joomla) - the frontend of this module is created with VUE 3 incl. Router. The prototype is already working and can be integrated into the CMS Module. Also the router works. If a link is clicked within the VUE app, the corresponding view is displayed. But if the user is now on a subpage of the VUE App and refreshes it (F5 / Ctrl + F5), the page is not found - i think because it exists only in the Vue Router.
To the URL structure:
domain.tld <-- This is where the Vue application is located.
domain.tld/list-:id/item-:id <-- This is the URL for an ITEM
Now I know that it doesn't work like that because the webserver tries to interpret the URL which it can't because parts of it are from VUE.
Is it possible to reconfigure the vue router to work with parameters instead of a "physical" structure?
from: "domain.tld/liste-:id/item-:id"
to: "domain.tld?liste=:id&item=:id"
i think this could solve the issue but i dont know...
Edit:
When i try to use this in the router it still works but has the same effect because yeah "appname" cannot be found by the server..
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/appname?playlist=:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/appname?playlist=:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
]
You can assign a controller to a wild-card, which always return you Vue app:
$router->addMap('/domain.tld/*', 'VueController');
Another approach would be using a # in your URL. Everything after your # will be ignored by the server.
Based on the information i've got from Roman i have changed the routes and added a 404 to the router which refers to home. The views are now been loaded as "url params".
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/#appname?playlist-:id',
name: 'PlaylistDetails',
component: PlaylistDetails,
props: true
},
{
path: '/#appname?playlist-:id&video=:vid',
name: 'Player',
component: Player,
props:true
},
{
// Match all paths vue2 Use * vue3 Use /:pathMatch(.*)* or /:pathMatch(.*) or /:catchAll(.*)
path: "/:pathMatch(.*)*",
name: "404",
component: Home
}
]
If now someone tries to open a site via directlink he got redirected to home.
There might be a better solution but this works when you are using vue inside another PHP app where you are not able to configure the server.
additional info for 404:
https://qdmana.com/2020/12/20201223195804176T.html
It looks that Hotlinks (directly into a view) are not possible in my scenario.
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 am trying to use Vue-Router to pattern URLs in my new project so they look just like URLs in an existing (non-Vue) application. Existing application URLs look like this:
/#!page1
/#!page2
My Vue Router currently looks like this:
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/page1'
},
{
path: '/page1',
component: Assessments
},
{
path: '/page2',
component: Assessments
}
]
})
But, of course, this generates URLs that look like this:
/#/page1
/#/page2
How can I configure my router to mimic the /#!route pattern?
You can use the base option:
base
type: string
default: "/"
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/".
https://router.vuejs.org/en/api/options.html#base
I have tried it with your case, it also works with /#!.
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: [{...}]
})