This type of path is not working:
{ path: 'account/finalize?user=:user&token=:token', component: MyComponent }
I get route not found error when I access http://localhost:4200/account/finalize?user=devanshu&token=122323
But this is working:
{ path: 'account/finalize/:school/:token', component: MyComponent }
So, I can access http://localhost:4200/account/finalize/devanshu/122323
What is the problem here? Why is there an error in the first case?
you can use
path: 'account/finalize'
and send user and token as query Params when navigating
this.router.navigate(['/account/finalize'], { queryParams: { user: 'user', token: 'your token' } });
I think you do not need to pass these parameters:
user=:user&token=:token
You can get these parameters in the req.body
And if there is any particular component then you have to place the condition within the function.
Related
When I want to use programmatic navigation by vue-router package it works, but when I want to pass params to a component with router.push methods, it doesn't work at all. Does anybody have a solution?
My code here:
import VueRouter from 'vue-router'
import routes from './routes';
const router = new VueRouter({routes});
Vue.use(VueRouter);
and the push code:
router.push({ name: 'reportArchive', params: {token: token} });
My route config:
{ path: '/reportArchive', name: 'reportArchive', component: reportArchive },
If you really want to pass param, you will need to set the route to accept param, just like below :
{ path: '/reportArchive/:token', name: 'reportArchive', component: reportArchive },
This is as per Eldar's answer above, but if you want to pass url query parameters, you need to use query instead of params in the code, for example :
router.push({ name: 'reportArchive', query: {token: token} });
Your route definition doesn't accept a paramater. You should define your route as below :
{ path: '/reportArchive/:token', name: 'reportArchive', component: reportArchive },
So, I have my routers set up like this:
const routes = [
{
path: '/',
name: 'HomePage',
component: HomePage,
beforeEnter: checkAuth,
meta: {
requiresAuth: false,
showSidebar: false
}
},
{
path: '/feed',
name: 'FeedPage',
component: FeedPage,
beforeEnter: checkAuth,
beforeRouteEnter: ((to, from, next) => {
console.log(from)
}),
meta: {
requiresAuth: true,
showSidebar: true
}
},
{
path: '/faq',
name: 'FAQPage',
component: FAQPage,
beforeEnter: checkAuth,
meta: {
requiresAuth: true,
showSidebar: true
}
},
}
]
So checkAuth is a function that basically checks wether the user is authenticated before Entering that route (using google auth), which works perfectly. But I also want to use beforeRouteEnter to check whether the user's designation is allowed in that route AFTER authentication. I have the designation stored in the Vuex store.
How can I use this keyword such that I can use the plugins?
And also, what is the proper way to use beforeRouteEnter?
Based on the Vue Router documentations, The beforeRouteEnter guard does NOT have access to this, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
However, you can access the instance by passing a callback to next. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument:
beforeRouteEnter (to, from, next) {
next(vm => {
// access to component instance via `vm`
})
}
Also there are beforeRouteUpdate & beforeRouteLeave you might want use as well based on your needs, for these this is available ( but passing callback is not supported on these two )
beforeEnterand beforeRouteEnter are both guards with the same goal, the difference is where to use it.
beforeEnter is a guard you can define on a route's configuration object. https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard
beforeRouteEnter is a guard you define on your component.
https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards
Either way if you want to access you Vuex Store you should import it.
This could be an Example of your FeedPage component usign beforeRouteEnter
<script>
import Store from '../vuexstore.js'
export default{
beforeRouteEnter(to,from,next){
if(Store.state.isAllowed){
next()
} else {
next(false)
}
}
</script>
Don't forget to use next() to continue the navigation after the validation.
Could you please tell me how to redirect to component when service give error ?In my app I am requesting a service , I want if I got any error some service it will show error component
Here is my code
https://stackblitz.com/edit/angular-ctwnid?file=src%2Fapp%2Ftest.service.ts
In my current example I am using resolver to get data.
const routes: Routes = [
{
path: 'home',
component: HelloComponent,
resolve: { data: TestResolver }
},
{
path: 'error',
component: ErrorComponent
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
I changed requested url so that I will get an error
correct url :https://jsonplaceholder.typicode.com/todos/1
wrong url :https://jsonplaceholder.typicode.com/todoss/1
I want that if I get an error it redirects to Errorcomponent.
#Injectable()
export class TestResolver implements Resolve<Observable<string>> {
constructor(private testService: TestService) {}
resolve(): Observable<any> {
return this.testService.getConfiguration();
}
}
any update ?
You have a couple of options. You could use a Guard to handle this, but because it's based on resolved data, it would probably be a good idea to make it an interceptor. Here's a post that should point you in the right direction re: interceptors
Using Router in services in Angular 4
You can handle this in your component.ts
Whenever the API call fails just use
this._service.function().subscribe(success => {
.....
},
error => {
this.router.navigate['error'];
});
where you call your service.
I have a sample Vue router here which handles going to the login first before accessing the form with a specific id:
router = new VueRouter({
routes: [
{path: '/form/:id', redirect: '/login'},
{path: '/login', name: 'Login', component: Login}
]
});
Is there a way that the login can still access the :id parameter passed since when I run http://localhost:8080/form/c101-101 it directly redirects to the Login component and when I try to log this.$route.params.id inside the login component it's undefined. Is there a way I can pass the :id on redirect?
You can use a function for dynamic redirecting, as per the Vue docs.
Here's an example taking a param (e.g. yourdomain.com/:yourParam) and redirecting to another URL, using the param (yourParam) as a query string (yourdomain.com/your/route?yourQueryString=:yourParam):
redirect: to => ({
name: "your-named-route",
query: { yourQueryString: to.params.yourParam },
}),
note: this syntax is using ES6.
You can make /:id as optional in login routes as follows:-
router = new VueRouter({
routes: [
{path: '/form/:id', redirect: '/login/:id'},
{path: '/login/:id?', name: 'Login', component: Login}
]
});
With above snippet of code you will get this.$route.params.id in login component.
I am doing a project in Vue with Vue-Router . in my project ,i have a param named 'adtag' , which must be in the url query params , is there any simple way to hold this param ,no mater how router goes.
for example , I have three pages:
localhost/index
localhost/list
localhost/detail?id=11
page change using vue-router <router-link :to="{name:'Detail',query:{id:item.id}}"></router-link>
if I opened first page localhost/index?adtag=123 with adtag,page will changes with param 'adtag'
localhost/index?adtag=123
localhost/list?adtag=123
localhost/detail?adtag=123&id=11
With a default Vue 2.x installation, the router file is located src/router/index.js
I was able to then check if I needed to modify the request and add in any missing query params (modifying the to var apparently has no effect), and then call a "redirect" of next( .. new rout.. ).
Downside: Doubles the route calls, because essentially it redirects
Upside: It works, and the query preserving logic is in one place.
One caveat: On page load, the router fires and the "from" is a very empty route (even excluding the query params that were in the URL). Therefor I setup that if statement to verify the need to place the query param in place.
import Vue from 'vue'
import Router from 'vue-router'
// ... All your other components
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Dashboard',
component: Dashboard
},
// ... All your other routes
]
})
router.beforeEach((to, from, next) => {
if (from.query.token && !to.query.token) {
if (to.path === from.path) {
// console.log('Identical routes detected')
return // This is a no-no via the documentation, but a bug in routing to identical routes strips query params, and this prevents that
}
next({path: to.path, query: {token: from.query.token}})
}
next()
})
export default router
As this is still an issue, I would even recommend using next(false) instead of returning.
if (from.query.foo && !to.query.foo) {
if (from.path === to.path) {
next(false);
} else {
next({
path: to.path,
query: { ...to.query, foo: from.query.foo },
});
}
} else {
next();
}
For reference, the same issue from the github repository: https://github.com/vuejs/vue-router/issues/1900#issuecomment-346531301.