Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
i have created 3 pages, first page is navigating to second page and second page is navigating to 3rd page, how ever when i click back button it is navigating to previous page but its not giving last history intead of its reloading the page,
This is normal as the previous component's instance is destroyed. You can console.log in each lifecycle hook to see which hooks are called when a route is entered and exited.
To prevent this behaviour and cache your route's component you can wrap the <router-view> inside <keep-alive>
<keep-alive>
<router-view></router-view>
</keep-alive>
You can even pass include and exclude props on <keep-alive> to manage which component to or not be cached
Related
Basically I have a component (profile comments) which has child components (friends, followers, Posts).
Initially I am loading the profile and passing the data through the props and fetching the data in their individual components.
I want to have a suggestion since I have a post component which has many posts as a v-for loop and i wanted to open its individual single post by its id (pk). Since the Post component is a child component of the profile component how can I replace the component with the Single post or should I dynamically render the component on the basic of the param?
This question is a bit open ended on how you would proceed with it so you might get flagged.
However, here is a potential solution:
So your profile route might look something like this:
/profile/:id
<template>
<Posts :posts="posts" />
<Friends :friends="friends" />
<Followers :followers="follower" />
</template>
As the posts get rendered out, you can click on one to show the post.
At which point you can probably add a new route in your router/index.js that takes the user to a whole new component that doesn't have the child/parent relationship.
{
path: '/post/:id'
component: () => import('../views/Post');
}
And once that route loads, you can fetch all of the post related data if you need it.
Alternatively, you can use child routes under your /profile/:id route, which in my opinion would be the more elegant solution.
Comment below if this didn't answer your question and I'll try to refine.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I using Vue3 and firestore
Here's my problem.
<textarea class="form-control v-model="form.comment" #keypress.enter="saveComment" required></textarea>
<button #click="saveComment">save</button>
#keypress.enter="saveComment" is works
but
#click="saveComment" did not work.
I don't know what's the difference between these two.
I used saveComment in the methods: {} in the script.
edited
When I ran the function through #keypress.enter, the page was not refreshed
But when I ran the function through #click, the page was refreshed and the function was not executed.
So I added a prevent.submit and it works well.
Considering the fact that you only shared little information on your question, I would be answering based on some assumptions.
The keypress event is an event emitted when a key that emits is character is pressed (this event is already deprecated according to MDN, so you might want to consider keyup/letdown event).
However, you should note that the #keypress.enter event according to Vuejs would only be emitted when an individual clicks on the enter Key.
#click event on the other hand would be emitted when a click event is observed on such element, in this case a button.
I have one VuesJS view with two components in it that have a main-detail relationship. The user can click on an item in the main component (the item gets highlighted) and the details component will show the related detail items.
products.vue
<main></main>
<details>></details>
The user can edit a detail item and I want that to take place using a separate view containing the necessary components to edit the detail item.
I want the user to be able to navigate back to the products.vue view (say after finishing the editing process) with its state as it was when the initiated the editing operation.
I tried wrapping each of main and details in <keep-alive></keep-alive> but that did not seem to do the trick.
I have also read a few posts where <keep-alive></keep-alive> is used with the include property around the <router-view></router-view> but I'm not sure what to include in the include in my case.
Any thoughts on whether this is possible or what I'm doing wrong?
thanks
To persist state beyond route changes the state needs to either be stored:
in a component that is a parent to the <router-view> (such as <App>)
in a new vue instance with shared state that you import into the required components
in the official state management library Vuex (recommended)
Please take a look at the fiddle
https://jsfiddle.net/L3px7okf/
I want to reload the app when the same route (for example /foo) which you are currently on is clicked again because I need to reset the page state (yes, the correct way would be, actually, to reset the state, but the application code is a bit tricky thus I need a quick solution).
But I don't want to reload the app when I'm clicking /foo being on route /bar.
The problem is that VueRouter does nothing when the same link is clicked. Global (like beforeEach) and in-component (like beforeRouterEnter/beforeRouteLeave) hooks are not called. #onclick.native event handling doesn't help because when the handler is executed the route is already updated.
I found this...https://stackoverflow.com/a/51170320/10039548
<router-view :key="$route.fullPath"></router-view>
Seems like they talk a bit about this issue here
this.$router.go()
Can refresh the page on click..
Try using <a href="your route here"> I've used this and it's working just fine.
I have issue with having keep-alive actually keeping components alive.
Component that is being rendered in router-view have async fetching after component is mounted. My issue is that after the first time component shows up, when I render other component in that very same router, and then go back, then first component rerender as normal instead of keeping fetched data as it was.
I checked hooks and besides activated and deactivated also created hook fires which I suppose shouldn't be the case beyond first render. Also when I switch components destroyed hook fires which also shouldn't happen.
.container-fluid
.row.wrapper
aside.col-12.col-sm-2.p-0
nav.navbar.navbar-light.navbar-expand-sm.align-items-start.flex-sm-column.flex-row.text-uppercase#navbar1
a.navbar-toggler(href='', data-toggle='collapse', data-target='.sidebar')
span.navbar-toggler-icon
.collapse.navbar-collapse.sidebar
ul.flex-column.navbar-nav.w-100.justify-content-between
li.nav-item
router-link.nav-link.pl-0(to='candidates' data-toggle="collapse" data-target=".navbar-collapse.show")
font-awesome-icon.fa-fw.mr-2(:icon="iconTachometer")
| Dashboard
main.col.bg-faded.py-3
.card
.card-body
keep-alive
router-view(:key="$route.fullPath")
Okay, I found the answer - and my apologies because turned out my question wasn't fully informed.
First thing - the component in question was already nested within another router-view so what I was actually doing was nesting one in another.
Therefore, to keep alive that nested/child router-view parent router-view also has to be wrapped with keep-alive.
Based on answer here: https://forum.vuejs.org/t/how-to-use-keep-alive-with-nested-router-component/46813/4
See Special Attributes - key:
It can also be used to force replacement of an element/component
instead of reusing it. This can be useful when you want to:
Properly trigger lifecycle hooks of a component;
Trigger transitions.
If you bind key to $route.fullPath, it will always force a replacement of the <router-view> element / component every time a navigation event occurs. So just remove :key.