Vue, how can I render different navbar due to route? - javascript

I am new at Vue.js. I am working on demo project. In my project, I have three different navbar. First one for HomePage, second one for Login/Register page and third one is for Dashboard. In frameworks like React and Vue we set one global navbar for all pages. How can I render this three navbar components conditionally ? What is the best practice for that ? I want to set vuex for solve that, is that a right approach ?

You can do it using named routes. In your component you set multiple named router views:
<router-view name="navbar"></router-view>
<router-view ></router-view>
And in routes you set which component to render and where:
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: HomeContent,
navbar: HomeNavbar,
}
},
{
path: '/dashboard',
components: {
default: DashboardContent,
navbar: DashboardNavbar,
}
}
]
})
Otherwise you can set a conditional in the component and render navbar based on route:
if ($route.path === home) {
<NavbarHome />
}
If navbars have much in common you can just use a conditional for elements that are in one but not in another.

Actually what you can do is make a navbar component and use v-if to check on which route you are currently on. You can use the $route object to verify the current URL and use computed to check if the route name or params/queries are the same as you want.
computed: {
dashboard() {
return this.$route.name === 'Dashboard'
}
}
And then in your navbar component use v-if="dashboard" to check your conditions

Related

How to use a component depending on the route

Hello I am currently doing the front end of my project.
I would like to render components dynamically depending on the route.
For example I have a /auth route then it links to /auth/login or /auth/register or /auth/forgot.
This is the place where I would like to see the different components rendered.
I was assuming I can use router-view to loud the different components into the DOM.
<template>
<head-comp></head-comp>
<router-view></router-view>
<footer-comp></footer-comp>
</template>
<script>
import HeaderComp from '../components/Universal/HeaderComp.vue'
import FooterComp from '../components/Universal/FooterComp.vue'
export default
{
components: {
'header-comp' : HeaderComp,
'footer-comp' : FooterComp
}
}
</script>
This is the router
{
path: '/auth',
name: 'auth',
component: () => import('../views/AuthView.vue'),
children: [
{
path: 'login',
name: 'auth.login',
component: () => import('../components/Authentication/LoginComp.vue')
},
],
}
And this is the vue file that will contain the login form.
<tempalte>
Login
</tempalte>
<script>
</script>
The error I get with my current approach is this.
The requested module '/src/components/Authentication/LoginComp.vue?vue&type=tempalte&index=0&lang.tempalte' does not provide an export named 'default'
I was thinking I could just use different views for example, login/registerView.vue instead of having them in components but I feel like this is messier and would make it harder to maintain in the future.
Thanks for reading and looking forward to your responses.
You have typos in your LoginComp.vue component.
<tempalte>
Login
</tempalte>
should be
<template>
Login
</template>

Navigate to child router from named outlet

I'm trying to open the expanded item on some grid of components that are rendered inside the named outlet. For that purpose I've created a children to my named outlet path.
I'm using the Angular 7 and already tried some guides from other posts. Also it seems possible to make by just specify another outlet.
Routing:
{
path: 'my-path',
outlet: 'view',
component: MyComponent,
data: {
animation: 'bottom-left-scale'
},
children: [
{
path: 'project',
component: ExpandedProjectComponent
}]
}
in html:
<app-project [id]="project.id" [thumbnail]="project.thumbnail" [name]="project.name" [routerLink]="[{outlets: { view: 'my-path/project' }}]">
</app-project>
But when trying to navigate to it get the error that
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'my-path'.
Using tracing shows it like this - url: "/(view:my-path/(view:my-path/project))" where project should be expanded item. How can i navigate to smth like /(view:my-path/project) or /(view:my-path)/project?
So, trying it from routerLink directive fails. But using the router.navigate works.
app.routing.ts stays the same.
ExpandedProjectComponent
openProject(id) {
this.router.navigate('project', {relativeTo: this.route});
}

Refresh data on vue

This may have been asked but I have not be able to find a solution. I have a index page that loads a left nav vue. On that view is a typeahead input with names. When a name is selected a function is called and and a unique value is passed as the pmid_list
this.$router.push({ name: 'About', params: { pmid_list: item.PMID_Include } }
This works fine the first time because the About vue is loaded and the function is called with the pmid_list value. Every name works fine if I refresh the page between calls. If I don't refresh the correct pmid_list (parameter) is sent to the router but the router decides to send the old one if the vue component has not changed.
From what I have read it is a router issue but I can't figure out how to force it to refresh.
export default new Router({
mode: 'history',
routes: [
{
path: '/about/:pmid_list',
name: 'About',
component: About,
props: {default: true}
}
The About component is being cached.
One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
Dynamic Route Matching
As shown in the documentation, you should use a watcher to react to parameter changes:
watch: {
'$route' (to, from) {
// react to route changes...
}
}
You can try to watch your route changes.
watch:{
'$route.params.pmid_list': function (pmid_list) {
//your logic here
}
},

Navigate between outlet modals in Angular 5?

I can't handle navigation from one modal window to another.
I have routing module:
{
path: 'modal1',
component: Modal1Component,
outlet: 'modal',
}, {
path: 'modal2',
component: Modal2Component,
outlet: 'modal',
}
Main component: MainComponent and in its template i have
<router-outlet name="modal"></router-outlet>
So i am clicking a button that triggers
this.router.navigate([this.router.url, { outlets: {modal: 'modal1'} }]);
And in Modal1Component that is rendered i have a button for modal2. So i want to call modal2 from modal1. How can i tell router to go to the parent route and then call:
this.router.navigate([/* what should be here? */, { outlets: {modal: 'modal2'} }]);
It looks like you're just changing the outlet in your router.navigate, but the route itself is not actually changing. And I don't think you actually require a named outlet to do what you're trying to achieve.
When you use router.navigate, you can specify if you want to navigate relatively from somewhere using the ActivatedRoute class. To do so, you have two options :
navigate relatively from you current component and indicate in the path that you want to "go up" one level. Example :
this.router.navigate(['../modal2'], { relativeTo: this.activatedRoute });
navigate directly from you parent. I would personaly use this one but both works. Example :
this.router.navigate(['modal2'], { relativeTo: this.activatedRoute.parent });
I created a mini repo with an example of what (I think) you're trying to achieve on : stackblitz.
Hope that helps
Some service can be useful in this case, like in doc:
https://angular.io/guide/component-interaction

Can we render same route using navigator in react native?

I have a view, lets say DynamicView. I am trying to push the same view(DynamicView)in navigator with different params.
this.props.navigator.push({
component: DynamicView,
params: {} //Different params
})
...
export default connect(mapStateToProps, mapDispatchToProps)(DynamicView)
DynamicView is connected with the redux flow. But I cannot access the latest state in the pushed component.
I want to know, whether is this the right thing to do? If yes, how can i access the latest state in the pushed component which is same as parent. If no, then is there any other approach to create the new route dynamically.
Any help is appreciated. Thanks.
React Native v0.40
A React Navigation navigator, such as a StackNavigator for example, can easily support that. As confirmed here by the creator of React Navigation.
So say you're doing some basic navigation using a StackNavigator.
You would do something like this:
export const SimpleApp = StackNavigator({
MyDynamicView: { screen: DynamicView }
... other routes ...
});
And then, from your React components (including the DynamicView component) you can navigate to the MyDynamicView route as many times as you want, with different params:
navigation.navigate('MyDynamicView, { username: 'John' })
or
navigation.navigate('MyDynamicView, { username: 'John2' })

Categories