I am using below code to handle unknown routes.
config.mapUnknownRoutes(instruction =>
{
_self.router.navigate(_self.routerConfigInfo.defaultRoute);
return;
});
For example:
My Default route is "welcome" and I am currently on Route MyApp which is known route, and now if I change the MYApp to MyApplication(Unknown route) on address bar then my application properly navigate to default route welcome but in the address bar, my URL is still MyApplication. it should show welcome but it's not happening. Any idea what I am doing wrong?
Default Route: http://localhost/framework/
Current Route: http://localhost/framework/#/MyApp?cid=123
Changed Route Manually on address bar: http://localhost/framework/#/MyApplication?cid=123
MY URL is http://localhost/framework/#/MyApplication?cid=123 instead of http://localhost/framework/
Related
I asked this at two other places but couldn't get a good answer. I would be grateful if anyone here could help me with this. I also think this may help other in the future.
My problem is a bit specific.
I am trying to set the "/" router to for example "/team-12" .
"team-12" is selected by user and stored in localStorage or store(Pinia).
So for example if the user selected a team, the default router will be /team-12/ (".com/team-12/settings" etc.). All the website routing will be added after "team-12/" If not selected it will be team-1 or something like that. And the user can change the team, thus the default route will change and page will refresh.
I managed to set the route to localStorage value but I get an error:
[Vue Router warn]: No match found for location with path "/team-12"
Also I can't add other routes to "/team-12". How can I achieve this? If there is a better aproach, ignore the code.
I tried this: router.ts
router.ts:
const contractId = localStorage.getItem("contractId");
{
path: "/",
name: "home",
redirect: `/${contractId}`,
component: Home,
},
Component:
const selectTeamId = (teamId: string) => {
localStorage.setItem("teamId", organization);
console.log(localStorage.getItem("teamId"));
router.push({ name: "home" });
};
I'm on the page: /foo and click on the button to redirect me to /bar.
But I have beforeEach route event which redirect me to /login. after I do login, I redirect to /bar.
When I on /bar I click on the back button I get to login page. instend I want to get the the last page which is /foo.
How can I do it? is there a way to redirect to login without add route to history record?
router.beforeEach((to, from, next) => {
if (!to.matched.some((record) => record.meta.auth)) { return next(); }
return next({
path: '/login',
});
});
Use replace instead of push when you redirect to the page after login (in the login component).
loginSuccessed() {
this.$router.replace(redirect);
}
Use route.replace insted of router.push. It acts like router.push, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry.
succesffulyLoggedin() {
this.$router.replace({ name: 'dashboard' });
}
read docs here router replace
I have a route which shows after a user has completed a payment, say at the /success URL. How would I make that someone can't simply go to example.com/success and see the success screen. Instead, it should only be accessed by running this.$router.go('/success/'); in code.
Thanks
Take a look at Navigation Guards.
You can add a beforeEnter to the route which you can use to check if the user should access the page.
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
You can do this with router navigation guards, in particular in-component guards. By defining the beforeRouteEnter, you can check (for example) the store, to see if data associated with payments is defined.
How do I specify a catchall or actually a catch[most] for express so when the user selects refresh on a page that is actually contained in the app bundle, the GET doesn't fail.
home.html
profile
app.js
config.map([
{ route: ['', 'home'], name: 'home', moduleId: 'home' },
{ route: ['profile'], name: 'profile', moduleId: './profile/profile'}
]);
If I click on the profile link, the URL shows localhost://profile and the page renders correctly without performing a GET because the requested resource was bundled in the initial GET. But lets say I refresh the page with localhost://profile, then it makes a server GET request for that page.
If on the server I specify something like:
app.use('/', express.static(__dirname));
app.use('/profile', express.static(__dirname));
It works properly. I was anticipating some type of catch all formatting so I don't have to add every possible route for an app with all routes bundled. Something like:
app.use('/*', express.static(__dirname));
Then the following to capture GET's for another app
app.use('/othercoolapp/*', express.static(__dirname)+'/othercoolapp/');
But it doesn't work...
This issue you're encountering applies to every single page application framework and library with pushState routing enabled.
Above your app.listen or equivalent line of code in the file that bootstraps your Express server, add something like this:
app.get('*', function(request, response){
response.sendFile(path.join(__dirname + '/index.html'));
});
The general idea is that this generic wildcard route will capture all URL requests and send the index.html file. This allows Aurelia to handle its own routing.
I want bad routes to navigate to the root route. I've added a mapUnknownRoutes configuration on my router.
config.mapUnknownRoutes((inst) => inst.config.moduleId = 'home');
But this leaves the route untouched. For example, #/fakeRoute routes to home. Ideally, I would like a behavior similar to returning { redirect: '#/' }, which cancels navigation and creates a new navigation to the route '#/'. Is this a feature?
The mapUnknownRoutes method also accepts a RouteConfig object so you can just directly specify your redirect there:
config.mapUnknownRoutes({ redirect: '#/' });
See the complete signature of the method on github