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 }
]
});
Related
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
i' m in a project (has been coded by someone else) , it has router.js file that include all app's routs , and created in a function , code below
export function createRouter() {
return new Router({
mode: 'history',
base: decodeURI('/'),
linkActiveClass: 'nuxt-link-active',
linkExactActiveClass: 'nuxt-link-exact-active',
scrollBehavior,
routes: [{
path: "/login",
component: _32e99e0f,
name: "login"
}, {
path: "/orders",
component: _5838bb72,
name: "orders"
}, {
path: "/profile",
component: _1a272ccf,
name: "profile"
}, {
path: "/orders/new",
component: _2c62ddc3,
name: "orders-new"
}, {
path: "/orders/new/:step",
component: _91e13fc8,
name: "orders-new-step"
}, {
path: "/orders/:order",
component: _14e0655f,
name: "orders-order"
}, {
path: "/",
component: _6941faf8,
name: "index"
}],
fallback: false
})
}
this function has been import and called in a function named createApp in index.js file, code below
async function createApp(ssrContext) {
const router = await createRouter(ssrContext)
const store = createStore(ssrContext)
// Add this.$router into store actions/mutations
store.$router = router
.
.
.
}
it seems stores in an array , and used globally that seems ok ,
the issue comes when i change one of routes and make a new one , like
export function createRouter() {
return new Router({
mode: 'history',
base: decodeURI('/'),
linkActiveClass: 'nuxt-link-active',
linkExactActiveClass: 'nuxt-link-exact-active',
scrollBehavior,
routes: [{
path: "/new-route",
component: _newname,
name: "newRoute"
},
.
.
.
when i use npm run dev or npm run generate, the function and its data has been overwrited and came back to the original code .
can anyone please make me a sense of what is happening hear , i'm so new in vue.js ;) and need some kindness .
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'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/#/