In bootstrap hash links are used to toggle collapsible panels:
<Link to='#' data-toggle='collapse' data-target={dataTarget} aria-expanded='false'>{this.props.text}</Link>
When clicking a link like this I would like react router to not re-render the components.
The above link is used in an nav-menu that overflows some page content. When the link is clicked in the menu it causes the page content to refresh. This happens because react router picks up the click on the link and as a result the route for the current page is triggered.
How can I avoid this so the link just toggles the collapsible panel without causing a re-render?
remove # from to='#'` and it won't refresh.
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.
How do I show a custom pop up to alert about unsaved changes in a vue component before leaving the component? For example: If there is some page in which we have a cart (vue component) in which items are added but not saved, how do I show a custom modal to warn the user before leaving to a different component without a route change?
First image is from parent Page, wenn i click on an item from navigation then child Page opens but i do not need same header as Parent's header, i need header with back arrow like in second image for child but without parent's header.
I have also added Sandbox link, please check App.vue, Help.vue, Help-info.vue , main.js, registerServiceWorker.js, index.js, vue.config.js ...
Others files are auto generated by this Sandbox editor.
Link For live Testing
https://moeddami.github.io/nuxt-material-admin-demo/dashboard/
In the above link i want the sidebar component towards right when $vuetify.rtl is enabled.
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.