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.
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 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;
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
If I use a baseUrl in vue.config.js eg. '/directory1' i also must have base: '/directory1' when setting up vue-router otherwise it will route to '/'.
I want to be able to reference baseUrl in my vue app so I can have
base: baseUrl
in my vue router setup, is this possible?
vue.config.js is just an exported object. There should be no problem in importing this object in your own code to read the baseUrl:
import { baseUrl } from './vue.config.js'
console.log(baseUrl);
So In my laravel app we have a url say
http://mywebsite.in/wfengine/search/
Now I want to use the laravel router to work on the above link , but nothing seems to be happening.
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/filters',
componenet: require('./views/filter')
}
];
export default new VueRouter({
routes
});
App.js
`import router from './routes';
// import './core/searchableCards';
var app = new Vue({
el:'#ep_result_1',
router
})`
HTML
<router-link to="/filters">Search Page</router-link>
Now on the page which is loaded by laravel , I get following url in the browser
http://mywebsite.in/wfengine/search/#filters
But the template is not loading , can anyone help me out with this
According to me the Vue Router is just doing some Dom hide and show so it should not be effected by the base url right ?
Vue router mounts the components (defined in the routes array).
So if you defined a laravel routes to wfengine/search/ for the (e.g.) search.blade.php there should be the <router-view></router-view> dom element, as the doc says.
After that you should define the vue-router:
const router = new VueRouter({
mode: 'history',
routes
})
The routes variable is the routes array, the mode is for use the vue routing without # (http://mywebsite.in/wfengine/search/#filters -> http://mywebsite.in/wfengine/search/filters).
After that you should register the url (wfengine/search/filters) in the web route in laravel, what is give back the search.blade.php or that "base page" what contains the <router-view> dom.
So 1. there should be a base php view, what contains the <router-view>.
2. Then register the urls in the server side what gives back the same base view. 3. Then the vue-router will decide which component should be loaded by the end of the url.
At the end of your routes/web.php file just put the below code. This tricks works for me.
// At the end of the file
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
Of course you have to put a <router-view></router-view> into your layout or blade file.