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.
Related
I have a Nuxt page and i want to change route path without re-rendering or refreshing page with a method on a button.
if i do this.$router.push() or replace(), page will refresh and if i do window.history.pushState() or replaceState() that works fine but after that if i add a query with this.$router.push({ query: a = b }) on my page, page will refresh because changing route with window.history will not change $route and when i use this.$router.push, Vue Router thinks its a different page.
I've done a lot of search on internet and did not find anything, so please don't label this question as duplicate.
What you're actually looking for is a Default Layout and some nested routes. Here is an example on how to achieve this in Nuxt with just a few steps: https://nuxtjs.org/examples/routing-nested-pages
Finally i solved this problem with using parent page and nuxt childs, i changed tabs to nav and rendered base components on parent page and other things on child pages and now it works fine. Tnx to #kissu and #Braks.
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).
I need help with checking for router changes under three different circumstances:
When the user enters a url in a brand new page. In this case, the route is for setting initial state. (In this case, on some controls, I check for an initialised flag to determine whether to set state)
When a user performs an action on the page when the page is loaded and that action changes the route.
When a user enters a url whilst the page is loaded. The intuitive behaviour should be to set page state. However, because I'm not sure how to distinguish this type of event from the second type, these events are ignored.
Is there a way to differentiate between the 2nd and 3rd types?
You can put a initial variable in the data section of your root Vue instance and initialize it as true - it will show your components that this is the first route since the page has been loaded in the browser. Then in the beforeEach hook of your router you will set this variable to false - but only when the from argument of the hook has a non-empty matched array (or if its name key is not null - considering all your routes have a name) so that you can skip the entering into the first route / and only clear the initial variable when you leave the initial route. Or you can use the beforeRouteLeave hook in the relevant component for / route which will clear the variable instead of beforeEach hook.
You can put a watcher inside the relevant page to watch for changes in $route - or you can use the beforeRouteLeave hook in the relevant components (I prefer the latter)
You can install an event handler for the beforeunload event on the window object to detect when the user types a new URL. This will also be triggered when you close the tab (or browser). You may want to look at https://stackoverflow.com/a/26275621 for a non-universal solution.
okay I have this problem. I'm trying to make a generic Vue component which should look at the route, and determine id the route has any siblings, and if it has, the component will make tabs for each sibling including current route.
is there any way to achieve this?
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.