I would like to use two v-navigation-drawer in my application.
I want to put the second v-navigation-drawer on v-content of the v-app.
This image, I put the sample image inside v-content.
Because, I created the routes. And when clicked in item of the second v-navigation-drawer, will open the other component next to v-navigation-drawer.
Ex:
blabla/settings/profile
blabla/settings/conf
Link: https://vuetifyjs.com/en/components/application/
So the routes are kind of nested according to your examples: a Settings in 1st Drawer and Profile & Conf in 2nd/child drawer. Let's call those Nested Routes.
1) If you wish to have those drawers as you wished, you need to create:
1 MainDrawer.vue component that wraps 1 ChildDrawer.vue child component which contains/wraps the <router-view> (if you're using vue-router). You will have to connect the links by append <router-link to="/settings/profile"> and other routes under Settings. You will have to toggle the drawer "open" state of 2nd child drawer if reached /profile or /config routes.
2) Instead of that approach, Vuetify has Nested List(link here) that solves your child routes with v-list-group component up to 2 levels in-depth (which is sufficient for your case as well).
Related
I'm trying to create a simple nested routing:
App (root component, main navigation)
Topic1 (sub-navigation)
Topic1/Sub
Topic2
My demo on Codesandbox has the following issues:
1. When navigating from /topic1 to /topic1/sub, I expected the content from topic1 to show up and the content from topic1/sub to be shown below, like this:
However, Topic 1 does not show anymore.
2. How can I avoid showing "App" twice?
I know I've added path: "/topic1", component: App, but only because without it the routing did not work at all. As per the comments in router/index.js:
component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
I seem to be missing something essential - thank you already for any answers.
App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn't use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.
Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:
<h1>Topic1</h1>
<h2>Topic1 Content</h2>
<p>
<router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>
Here is the working codesandbox.
Also I refactored a bit your router index.js.
I currently have the following problem with nested <router-view>s in my app and I want to know if this is even the right way to do it.
I have a navigation.vue route component with child routes configured in the router.
In this component, I have multiple <router-view>s (in a v-for loop).
Every router-view has its own link and if you click on it, the clicked container which holds the router-view will start a transition and reveal the content (the page.vue component).
To fire the transition before confirming the navigation, I listen for the beforeRouteUpdate() hook.
However, I now want to add other navigation components inside this navigation, so that I have something like that:
<navigation>
<page/>
<page/>
<navigation>
<page/>
<page/>
</navigation>
<page/>
</navigation>
The hook to open the sub-navigation seems to work - but if I try to open a page on the second level, the navigation component can't get the $refs that belong to itself. I see the beforeRouteUpdate() hook of the first level navigation being called. I think that's to be expected because it's still in the background, holding the second level navigation and its pages.
What can I do to only use the functionality of the second level navigation when it's opened?
Should I make some checks in the beforeRouteUpdate() hook, and are they both fired?
I'm probably confused because I don't know if the component is being reused or something - in my understanding it should be a second instance of the component.
I'm also using <keep-alive> around the <router-view>s - so if that's a problem and things work differently with that, I'd also be glad to get a hint.
Thanks!
I’m not sure if this will fix your problem but in this vue school video they talk about the Vue Router not always picking up on changes if the same component is being used. You can handle it by adding a key to the router-view like <router-view :key=“$route.path” />. Then any change to the path will trigger a reload of the component. Maybe you can experiment with adding keys to your nested <router-view>s?
I solved it this way:
Both beforeRouteUpdate() hooks are called, so I had to make sure which of the existing navigations should do the work. The upper level navigations skip the hook.
I also needed some checks to only render the navigation in the <router-view> if it is in the $route.match array of the current route.
I'm building a single-file-based Vue application from a template generated with the Vue UI tool.
I understand how a .vue file defines the styling/structure/behavior of a component, how smaller components can be composed into bigger components, and how the top-level "App" component mounts everything to an HTML Div.
As the user progresses through the app, though -- say from a login screen to a master screen to a detail screen -- what's the accepted approach to switching out the current screen-level component?
Ty in advance.
--The Vuebie
This is quite an open ended question so ill just show you what I have done in my own projects. I split my components directory into two directories; 'pages' and 'common'. (Ignore the 'firebase' directory is it beyond the scope of this question).
The common directory holds components that may be used in a page or re used in several different pages.
For example the 'account form' is used in my 'Edit Account page' and the category bar is used in several of my pages.
The pages directory holds components that are technically no different from my common components but they represent full pages on my website. A page component may contain several common components.
Now the biggest distinction between common and pages is in the router. I route different paths relative to the main url (that is probably not the technically correct description but hopefully you get the point) to each of the pages. Here is my index.js file from my router directory:
As you can see, I have a route pointing to each one of my pages. You can " switch out the current screen-level component" (as you put it) by using router-link tag's to navigate between different page components. These are clickable urls that your client can use, they can also be wrapped in buttons and such.
For example, this router link navigates to my home page, the component name is 'Helloworld'. See its corresponding reference in my router's index.js and in the pages directory so you can connect it all in your head.
<router-link class="nav-item nav-word" :to="{ name: 'HelloWorld' }">
Finally, I will talk a bit about the App.vue file. The App.vue acts like a base component as it contains the 'router view' tag within it's template:
<router-view/>
This means that every page that you route will be placed in the position of the 'router view tag'. I.e this tag will be replaced with the page. It is common practise to surround this tag with html code that you would like to be shown in each page. For example I have my router view tag between my nav bar and footer. So that the nav bar and footer will show on each page.
I am using vue.js and vue-router. I am trying to achieve the following:
I have a top navigation bar with navigation links. Some of them are links to other client-side routes so they are basic vue-router router-link component except one which needs to point to a component with the same id attribute value on the same page.
First, I have coded it as an HTML Anchor Element, a, with an href attribute value equals to the id attribute value of the target component.
Alternatively, I have tried to use a router-link with to attribute has the /, home path concatenated with href (id) value, so, /#target_id.
First way resulted unsuccessful on the routes other than the target element resides in, a bit obvious.
Second way also unsuccessful. It does not work even on the route that contains the target element, though updates the address bar properly. It also cannot reach to the target element from the other routes that do not contain the target element by ending only on the route with target element at the top of the page.
How to tell vue-router to not only reach the route and render the corresponding component but also follow the hash parts and reaching to the correct region on the page?
Probably I can render navigation links conditionally as anchors or router-link with respect to the current route, and then can invoke a window.location related change on a vue component lifecycle method on the target containing component. Or just use some vue component level or applicaiton level routing hooks.
I have a simple app that has 4 pages:
Intro
Homescreen
StoreA
StoreB
StoreA contains a Header and Storelist. Storelist is comprised of all the stores located in a certain area. Using Redux, I've made it so when a user clicks on an individual store, details of the store are made visible(quite similar to Stephen Grider's techStack tutorial). I would like to pass the navigation prop all the way down to CardSection that contains the details when it's clicked on. How would I pass the navigate prop from StoreA->StoreList->IndividualStore->StoreDetails so that I can create a button for a user to navigate back to the HomeScreen?
you have a few options,
the first one is to pass down the prop: this.props.navigation to the child component from the screen which is the parent of this child and if it's nested inside another component you just keep propagating the navigation prop down.
another option is to keep in a mobx/redux store a ref to the navigation of the navigator like so:
<Navigator ref={ref=>saveRefInStore(ref._navigation)} screenProps={/* props if needed */}/>
another option is to use this library, rn-navigation-store, that manages the navigation for you including nested navigators and persistence if you want.
using this library you are able to navigate from every component you want.
here is a link to the github repo
of course there are more options, but I think these options will help you