I am using vue 2. I have registered routes. Two routes are memberships and memberships/:id.
When I use:
this.$router.push({ path: 'memberships'} );
after this any this.$router.push results in appending to
http://localhost:8000/memberships/bronze
http://localhost:8000/memberships/silver
and http://localhost:8000/memberships/shop in place of http://localhost:8000/shop
and http://localhost:8000/memberships/deals in place of http://localhost:8000/deals
Use a leading slash in all of your base route paths:
this.$router.push({ path: '/memberships' });
Do this in the base route definitions too. Also you can name your routes and push by name:
this.$router.push({ name: 'memberships'} );
Related
guys. I have a shop page with two params: page and sort. like below:
example.com/shop/
example.com/shop/page/2/
example.com/shop/sort/newest/
example.com/shop/sort/oldest/page/2/
this is my route configs:
router: {
extendRoutes(routes, resolve) {
routes.push(
{
path: '/shop/sort/:sort/page/:page(\\d+)',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-sort-page',
},
{
path: '/shop/sort/:sort',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-sort',
},
{
path: '/shop/page/:page(\\d+)',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-page',
},
)
}
},
Now, after i generate my website, Nuxt doesn't generate sort pages. when i go to /sort/ or /sort/oldest/page/2/ it returns 404.
what do I need to do?
if I need to generate all these pages by myself, then what are these routes.push() used for?
I also want to add "name" and "filter" params. you see generating a dynamic route for all these parameters is impossible. what can I do?
thanks.
Im using Nuxt 2, by official doc, you need to add route for each parameter https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#routes
For workaround solution, I may create a redirect page for dynamic page and url is
example.com/shop/redirect?page=2&sort=newest
In redirect page:
mounted(){
const p_page= this.$route.query.page
const p_sort = this.$route.query.sort
this.$router.push(`/shop/sort/${p_sort}/page/${p_page}`)
}
I'm using nested routes so that might be causing the issue, however, I'm not sure how to fix it. I have the following route and children routes:
{
path: '/summoner/:summonerName',
component: Summoner,
children: [
{ path: '', component: Matchlist },
{ path: '/match/:matchId', component: SpecificMatch, name: 'specificMatch' }
]
},
When I'm on path /summoner/:summonerName I want to see the default Summoner parent component and the Matchlist component and when I'm on path /summoner/:summonerName/match/:matchId I want to see the default Summoner parent and the specificMatch child component. This works fine, however, when I try to use:
this.$router.push({ name: 'specificMatch', params: { summonerName: this.summoner, matchId: matchId, summonerInfo: this.summonerInfo, match: match}})
I get sent to /match/:matchId path instead of /summoner/:summonerName/match/:matchId which breaks the component because the components needs to get the username from the path. I assumed this.$router.push would send me to the correct path, alas no. Any tips how to fix this?
It's a matter of absolute and relative paths.
Your route with the name 'specificMatch' has the specified absolute path '/match/:matchId' so this is where you are navigated to. If you wish to append your path to the path of your parent route you will have to make your path relative, which means to leave out the initial slash (/) - e.i. path: 'match/:matchId'.
Currently I am working on a project where I have two components with a router-view, Auth and Dashboard. These two components have different html strucutures but use the same base path in routing path: ''.
The routing file would look like:
{
path: '/',
component: Dashboard,
children: [
...
],
path: '/',
component: Auth,
children: [
...
]
}
Ofcourse this will create complications since the paths are the same. Is there any way have a parent component without a path?
You can create a new component that shows the Dashboard or Auth components conditionally, then set that as the component for the '/' path in the routes config.
Something like this:
<template>
<auth v-if="isAuthenticating" />
<dashboard v-else />
</template>
I have the following routes:
ReactDOM.render(
React.createElement(ReactRouter.Router, {history: ReactRouter.hashHistory},
React.createElement(ReactRouter.Route, {path: '/', component: AppController}),
React.createElement(ReactRouter.Route, {component: LayoutController},
React.createElement(ReactRouter.Route, {path: '/dashboard', component: DashboardController}),
React.createElement(ReactRouter.Route, {path: '/signout', component: UserSignoutController})
)
)
, document.getElementById('content'));
This is how I redirect the application flow:
ReactRouter.browserHistory.push('/dashboard');
It works, but if I open my application on another machine with a different url structure, and I have to change url paths, I also have to change every push argument.
Is there a way to redirect using route names instead of paths?
In older versions it was possible to navigate by name, but AFAIK it is no longer working. In my opinion what you should do is to configure the basename of the history for your different servers, i.e. the prefix of the route. Take into account that the final part of the URL, the one that is configured by react-router is fixed.
In order to specify the basename, you should pass a custom history to the router.
useRouterHistory(createBrowserHistory)({ basename })
I have an Angular 2 test app running the latest alpha (37). There are just three routes, that look like this:
#RouteConfig([
{ path: '/', component: Home, as: 'home' },
{ path: '/errors', component: Errors, as: 'errors' },
{ path: '/about', component: About, as: 'about' }
])
I can access the routes, and when I place query string params in the URL I can read them just fine. However, a few instants after I read the parameters, I noticed that the route loads fine and the URL refreshes, removing the query string parameters.
In other words, accessing this route:
http://localhost:5555/errors?test=abc
Loads the /errors route, but right after the application loads the URL turns into:
http://localhost:5555/errors
That would be confusing to a user. I would like to keep the query string parameters in the URL.
I know, it's in alpha, but is this a bug or I forgot to set something up on the router? How can I keep whatever query string parameters in the URL?
Thanks!
This is fixed in Alpha 41. The query string is now persisted.
Updating for Angular 2:
To preserve query parameters present in the current url, add
// import NavigationExtras
import { NavigationExtras } from '#angular/router';
// Set our navigation extras object
// that contains our global query params
let navigationExtras: NavigationExtras = {
preserveQueryParams: true
};
// Navigate to the login page with extras
this.router.navigate(['/someLink'], navigationExtras);
For more info, check here:
Try this
this.router.navigate(['target'], {preserveQueryParams: true});