i'm trying to use VueRouter 2.2.1 in my Laravel application and for some reason my URL's (although working) show the # symbol in a weird way
http://myapp.dev/admin#/
Instead of
http://myapp.dev/admin/#/
As i would normally expect...
This is my VueRouter configuration
const Router = new VueRouter({
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
And on the PHP side of things i'm just defining a catch all route for the /admin section of the Application
// Catch-all Route, sends GET requests to VueRouter //
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '(.*)'])->name('catchall');
Like this, is there anything i'm doing wrong? It is working but it just kinda bugs me that the # just floats there.
You have to enable history mode, as stated here, I dont see that in your vue-router config.
const Router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: App,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard
}
]
}
]
});
You have to do it on server side, just redirect the route to one ended with '/'
As in laravel:
Route::get('{all?}', function() {
return view('index');
})->where(['all' => '^/admin\/$'])->name('catchall');
now just visit /admin/#/
Related
So I recently wanted to try and learn vuejs, so I used the CLI to create my project and to setup vue-router. Now, with the default vue router configuration the URL's show as /#/ and /#/about. However, in my configuration file I set the paths as / and /About. As I want the URL's to be like that, does anyone know how I can do this?
router > index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () =>
import('../views/Home.vue'),
meta: { title: 'Home', description: 'Foo bar.' }
},
{
path: '/About',
name: 'About',
component: () =>
import('../views/About.vue'),
meta: { title: 'About', description: 'Lorem ipsum.' }
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
EDIT:
Okay, so I found that the best way to fix this in VueJS v3 is to just switch out createWebHashHistory with createWebHistory, it's literally that simple. After you've switched your imports and the createRouter object, it should all be working fine! 🥳
My routes array looks like this
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/Index.vue') }],
},
{
path: 'home',
component: () => import('pages/Home.vue'),
},
// Always leave this as last one,
// but you can also remove it
{
path: '*',
component: () => import('pages/Error404.vue'),
},
];
But when I navigate to home it says cannot GET /home.
I'm using quasar btw, if that helps.
History mode
first make sure you are using history mode so you can access routes like /home directly . if history mode is not activated you will have a # thats hash_mode wich is default in vuejs
vue router example
const router = new VueRouter({
mode: 'history',
routes: [...]
})
Only frontend Routes
second in case of an spa that is loaded from a route like laravel make sure your backend is not redirecting users to any other page than the root / and all the routing should be handeled only buy your frontend .
laravel web.php example
Route::get('{path}', function () {
return view('app');
})->where('path', '.*');
Not an spa ?
if this is not an spa then you need to use hash mode ( remove history mode) , and access vue routes using the hashed url syntax
example hash urls
https://myspa.com/#/ for the MainLayout.vue
https://myspa.com/#/home for the pages/Index.vue
Try to use '/home' in your home route
{
path: '/home',
component: () => import('pages/Home.vue'),
},
On a specific UI action I'm calling:
router.push({ name: router.history.current.name, params: { league: league } })
I just want to add "/:league" param at the end of the route. I have a separate route for it:
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home, name: 'home' },
{ path: '/:league', component: Home, props: true, name: 'home/league' },
]
})
For example if the user is at / and he selects a "league" from a menu, I want the url to change to /leagueName.
It works, but it appends # at the end of the url and it ends up being /leagueName#. Is there a way to remove the hash? I'm already in "history" mode.
I found several bugs:
Check how your router is connected and configured:
const routes = [
{ path: '/', name: 'Home', component: Home },
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
You need to write $router, when you call a push.
You can't write a name like router.history.current.name, because you will go to the same page. So state explicitly: home/league.
Better not use one component to output different routes, this is not very good. But you can use child routes.
Instead of creating a separate route that points to the same component, use an optional parameter on one route:
export default new VueRouter({
mode: "history",
routes: [
{
path: "/:league?", // `?` makes `league` OPTIONAL
component: Home,
props: true,
name: "home"
}
]
});
And if you need to use $router.push() to change only the parameter value, you could omit the name or path:
<button #click="$router.push({ params: { league: 'myLeague' } })">
Go to My League
</button>
Note if the UI is intended to be a link, it might be best to use router-link, which avoids the Avoided redundant navigation to current location console warning:
<router-link :to="{ params: { league: 'myLeague' } }">Go to My League</router-link>
demo
After changing Vue router mode from hash to history, old links do not redirect the user to the new URL.
Some still use the old link.
const router = new Router({
mode: 'history',
routes: [
{
path: '/#/',
name: 'Home',
component: Home
},
{
path: '/',
name: 'Home',
component: Home
},
]
})
I need to redirect all existing URL links to URL without hash.
You can replace hash in beforeEach hook:
router.beforeEach((to, from, next) => {
if (to.fullPath.substr(0,2) === "/#") {
const path = to.fullPath.substr(2);
next(path);
return;
}
next();
});
I have a one page app in vueJS:
let router = new VueRouter({
routes: [
{ path: '/', component: Dis13HomeComponent },
{ path: '**', component: Dis13HomeComponent }
]
});
In main component in mounted() im getting the url param like this:
this.$route.query.token;
But if I open http://www.myapp.com/app.html?token=s56ds6d5d56f6ef6e it does not read the token parameter, becouse vue is adding #/ to the end of url so it looks like http://www.myapp.com/app.html?token=s56ds6d5d56f6ef6e#/
If I open this format of url: http://www.myapp.com/app.html#/?token=s56ds6d5d56f6ef6e then it works, but this path is forbidden on server.
How could I read the token parameter?
Make your router to work with history mode and you will not have the '#' anymore.
const router = new VueRouter({
mode: 'history', // <------------- HERE
routes: [
{ path: '/', component: Dis13HomeComponent },
{ path: '**', component: Dis13HomeComponent }
]
});