My site is hosted on the IIS and accessable as machinename/test/.
When i try to open site as machinename/test/ route become machinename/test/#/, and all assets are loading as expected.
But if i open as machinename/test route become machinename/test#/, and assets paths break.
How can i fix it? I want when going to machinename/test the path was becoming machinename/test/#/.
It's a little hacky, but this should work:
Before the VueRouter instantiation, add:
if (!window.location.pathname.endsWith('test/')) {
window.location.replace(
`${window.location.href}`.replace(
window.location.pathname,
`${window.location.pathname}`.replace(
'/test',
'/test/')
)
)
}
GO to your routes.js and change this
const router = new VueRouter({
routes: []
to this
const router = new VueRouter({
mode: 'history',
routes:[]
})
Rebuild your project and re-upload
Vue reference: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
Related
I read online that the hashtag in the url is caused by not using history in the vue router.
Currently, I am working on a big project and it would be a timewaste to start over and select history mode in the terminal.
That is why I would like to ask if it is possible to use switch to history mode while the vue project is already generated?
This is my url: http://localhost:8081/#/
The default mode for Vue router is hash-mode. You don't need the install the whole app again, just update the mode to history mode in your app where you have defined the vue router as follow:
For router v3:
const router = new VueRouter({
mode: 'history'
})
For router v4:
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
})
For reference:
https://next.router.vuejs.org/guide/#javascript
I use a Vue Starter Template:
Vite + Vue 3 + Tailwind CSS (starter) ⚡
Tailwind CSS v3.0.0-alpha ⚠
Vue Router 4.x
The App should run in a subdirectory like: domain.com/VueApp and i followd the manpage of router vuejs to add a baselike this:
const router = createRouter({
history: createWebHistory(),
base: '/VueApp/',
routes,
})
But the <router-links> still ignore that base entry.
I don´t know if I understood you correctly, but if you want the url have /VueApp/ in it, you need to change it for the createWebHistory(). Like this:
const router = createRouter({
history: createWebHistory('/VueApp/'),
base: '/VueApp/',
routes,
})
base declares where your app is located at the domain, but still would run without the given path.
I am using the NestJS ServeStaticModule to resolve my admin and client front-ends to two different paths, /client and /admin.
When we try to load this page Vue is attempting to load the JS, CSS and other local assets without the /{prefix} in-front resulting in a 404.
Is there a way to work around this, do I need to define at a Vue level what the route is going to be prior to building?
My solution was to add the pass path to my VueRouter when in production. For example if you are trying to replicate this is how it would look:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: (process.env.NODE_ENV === 'production' ? '/admin' : undefined ),
routes: [...]
});
export default router;
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 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: [...]
})