I have an Angular 8 app. In my router module I have something like this
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':code', component: CodeComponent },
{ path: 'not-found', component: NotFoundComponent},
{ path: '**', component: NotFoundComponent }
];
The problem here is that when I access (for an example) /not-found the component CodeComponent activates, but not the NotFoundComponent.
I want to distinguish /not-found page from parametrized /:code
Invert the order of your routes in your array so the 'not-found' definition comes before the ':code' definition. Like this
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent},
{ path: ':code', component: CodeComponent },
{ path: '**', component: NotFoundComponent }
];
Related
Vue router (4) not adding the router-link-exact-active class when it is an exact match. It does add the router-link-active class but this means that there will be several active classes with some routes and dashboard will always be active due the /en part. I tried to add the exact attribute but this does not work.
router/index.js
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: `/en`,
component: () => import('../Pages/Base.vue'),
children: [
{
path: '/en', name: 'dashboard', component: page('Users.vue'),
},
{
path: 'users', name: 'users', component: page('Users.vue'),
},
{
path: 'users/settings', name: 'users.settings', component: page('UsersSettings.vue'),
},
]
},
]
});
// link component (works)
<router-link :to="getToValue">
<slot />
</router-link>
Add linkExactActiveClass property
const router = createRouter({
history: createWebHistory(),
linkExactActiveClass: 'active',
routes: [
{
path: `/en`,
component: () => import('../Pages/Base.vue'),
children: [
{
path: '/en', name: 'dashboard', component: page('Users.vue'),
},
{
path: 'users', name: 'users', component: page('Users.vue'),
},
{
path: 'users/settings', name: 'users.settings', component: page('UsersSettings.vue'),
},
]
},
]
});
Let's say I had this routes config:
pages
- index.vue
- admin
- login.vue
- register.vue
Is there a way to make /admin/login act as the index of admin routes? I want to simply redirect whoever hits /admin to /admin/login.
You could use middleware in /admin/index.vue, which has a redirect method in its context argument:
<script>
export default {
middleware({ redirect }) {
redirect(301, '/admin/login')
}
}
</script>
The vue-router supports redirect in the route definitions:
https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect
const routes = [
/* ... */
{ path: '/admin', redirect: '/admin/login' },
{ path: '/admin/login', name: 'Login', component: LoginComponent },
{ path: '/admin/register', name: 'Register', component: RegisterComponent },
]
You can also define nested routes like so:
const routes = [
/* ... */
{
path: '/admin',
redirect: '/admin/login',
children: [
{
path: 'login',
name: 'Login',
component: LoginComponent
},
{
path: 'register',
name: 'Register',
component: RegisterComponent
}
]
}
]
I have an Angular 8 App that has lazyloading working on all the pages, except for 2 that have dynamic parameters where something is not working correctly
From the app routing module
{
path: 'product',
loadChildren: './marketing/page/product/product-page.module#ProductPageModule'
},
From the ProductPageRoutingModule
const routes: Routes = [
{
path: '',
component: AppMarketingPageProductComponent,
children: [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
]
}
];
Routes are being put into the imports correctly, and the ProductRoutingModule is imported into ProductPageModule.
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class ProductRoutingModule {}
In the AppMarketingPageProductComponent constructor
constructor( private route: ActivatedRoute ) {}
With these 2 I try to get the params within onNgInit function
this.route.params.subscribe( (params: Params) => {
console.log(params);
});
When I try to load the page I get an empty object. instead of "slug" or "slug" and "secondary" values key-value pairs.
The problem is that what I thought were child routes aren't really child routes so this
const routes: Routes = [
{
path: '',
component: AppMarketingPageProductComponent,
children: [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
]
}
];
needed to be changed to this
const routes: Routes = [
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug', component: AppMarketingPageProductComponent },
{ path: ':slug/:secondary', component: AppMarketingPageProductComponent },
];
now it works.
I know we can go to a route by its name using $router.push({ name: 'route-name' }).
What I want to know is how to do that with a child route name.
This is my route structure:
export default [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
childs: [
{
name: 'home.about',
path: '/about',
component: import('#/views/Home/About.vue')
}
]
}
]
But my console says [vue-router] Route with name 'home.about' does not exist for $router.push({ name: 'home.about' }).
What I'm missing?
Obs: The idea is to not route to the child using a hard route path.
const router = new VueRouter({
routes: [{
path: '/foo',
name: 'foo',
component: Foo,
children: [
{
path: 'fooChild1',
name: 'fooChild1',
component: FooChildComponent
},
{
path: 'fooChild2',
name: 'fooChild2',
component: FooChildComponent
}
]
}, {
path: '/bar',
component: Bar
}]
})
Now if you wish to navigate to fooChild1 then use $router.push({ name: 'fooChild1' }) or if you wish to navigate to fooChild2 then use $router.push({ name: 'fooChild2' })
You have a typo.
It should be children and not childs.
export default [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
children: [
{
name: 'home.about',
path: '/about',
component: import('#/views/Home/About.vue')
}
]
}
]
I wanted to change my vue route from /dashboards/dashboard to just /dashboard. How to achieve these using this code
import Layout2 from '#/layout/Layout2'
export default [
{
path: '/dashboards',
component: Layout2,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: () => import('#/components/dashboards/Dashboard')
}
]
}
]
I have tried putting these code but how can I add the layout2 if the component is already added?
export default [
{
path: '/dashboard',
name: 'dashboard',
component: () => import('#/components/dashboards/Dashboard')
}
]
If vue-router document
Note that nested paths that start with / will be treated as a root
path. This allows you to leverage the component nesting without having
to use a nested URL.
You can do
import Layout2 from '#/layout/Layout2'
export default [
{
path: '/',
component: Layout2,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: () => import('#/components/dashboards/Dashboard')
}
]
}
]