I have a blog (website.com), with a page for posts (website.com/post?id=...).
What I want, is whenever I go to post page, to trigger JS's alert.
This is the code for post page:
export default {
name: 'PagePost',
data() {
alert(1)
...
The problem is that if I go post page its trigger an alert, but if I go to another post it doesn't alert again, (it does only when I refresh the page).
From what I cloud understand, Vue save the page in the DOM, so it doesn't run this again (only when refreshing the page).
How can I re-trigger alert when the user go back and forth between pages?
P.S. what I'm trying to accomplish is when a user go between pages, to reload the post and the comments (without needing to refresh the page), but I tried to make the problem easier with trigger.
P.S. #2 I prefer to run the alert in the mounted() function, because it's loading faster than data().
It looks like you're using vue router. Take a look at beforeEnter method. You need define it in post route and trigger alert there.
Related
I am using Vue 2.x.
There is a post page. When I click on a button in the post page, I go to the edit page. And when I click submit on the edit page, I used this.$route.replace(link_to_post_page) in order to remove the edit page from the history stack, and push the post page.
So now I have two of the same routes(the post page) in my history stack.
The problem is, when I click on the browser's back button, I go to the same page, that is, the post page. This is a very unnatural flow of pages for the user, and I want to fix it.
I have researched on ways to fix this for 6 hours, however I failed to find the solution.
My first try was to use Navigation Guards. But Navigation Guards only work when the route changes. In my case, the route does not change.
I also tried using window.history.onPopState event listener but failed with that too, because I could not manipulate the route when using window.history.onPopState.
I would really appreciate your help. Thanks.
P.S.
The most similar question on Stack Overflow is this vue-router: skip page when using browser back button but it does not answer my question at all. I have checked other questions but they also don't answer my question.
Why not going back in the history instead of pushing a new /edit route?
Steps
Routes stack
/post
['post']
-> Click on "edit" button
/edit
['post', 'edit']
-> this.$router.back()
/post
['post', 'edit']
The drawback of this is that the user still can manually go forward to the /edit page.
But if they go on another page, it will override the next steps (the /edit route above on the stack)
Problem
I have an electron app with vue. As the user has no UI to navigate back I created a back button.
This works so far so good. But being logged in and on the index page the user shouldn't be able to navigate back any more. As he would navigate back to the login but would get redirected back to the index page. And this wouldn't make much sense. For that I want to disable the back button.
Tested
I have added a global variable to get the previous route in my components. But somehow this gets messed up when clicking twice or more often. It looks like that:
router.beforeEach((to, from, next) => {
Vue.prototype.$prevRoute = from;
return next();
});
I think it is because when navigating back the previous route changed to the route you were coming from. And not the history anymore.
There seems to be a github feature request to add the referrer but it was opened in 2016 and I am not sure if it will be again the same problem as above.
https://github.com/vuejs/vue-router/issues/883
In-component guards
I also tested beforeRouteLeave and beforeRouteUpdate but as the back-button is in my layout these methods are not called.
Application-design
I am having a login-page with authentication. After that the user-information is stored in the local-storage and I am using a middleware concept for redirecting (https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/)
To go back I am using this method: this.$router.back()
Expectation
My expected result would be to be able to check in the back-button-component if the back-route will be the login or if there the going-back-stack has only one value left. In that case I would disable my back-button.
I have a question with vue router. I'm working on a custom library of vue that most of the code has already been created before me. My question has to do with trying to get a page to use a back button on the page that works on a registration process flow (it works on all other pages, besides this one particular page).
I'm not quite sure whats exactly going on with why it's acting a certain way with the '#', which I assume is going to be the problem:
The flow of the app should go like this:
http://localhost:8080/#/events, hitting the 'Continue' button goes to the next page (product page)
http://localhost:8080/#/product, hitting the 'Continue' button goes to the next page (upgrade page)
http://localhost:8080/upgrade#/, hitting the 'Continue' button goes to the next page (payment page)
Each page has a back button on the page to go back to the previous one. Going from '/upgrade#/' and hitting the back button, the app gives me a link to a blank page with this URL:
http://localhost:8080/upgrade#/product
I'm not sure from when we are on the page of:
http://localhost:8080/#/product
and hit the Continue button, why the '#' moves to after '/upgrade'.
This is our method we are using to change pages:
changeRoute() {
this.$router.push("/product");
}
What you want is to put vue-router mode to history.
const router = new VueRouter({
mode: 'history',
routes: [...]
})
The default mode for vue-router is hash mode, which is why you are seeing this behaviour.
I'm in Registration.vue component. The component contains registration form with email, password, etc.. fields.
I would like to thanks user for successful registering (with instruction that he should go check email).
What is the best solution to do this?
I was thinking about:
redirecting to second component using this.$router.push or this.$router.replace but this will change URL and when somebody go this URL without registering he will see message that he should check email...
replacing current component with other when registering action successful but I dont know how to do this (without URL change, and with good code).
using <component v-bind:is="currentView"> but I am not sure if this is best solution. I need to make three files (for parent component with :is, for form and for thanks). Also i need to emit event from child that registration went well, but on the other hand i should fire vuex registration action and dont expect for response (see the next sequence)
The other thing is that we should not wait for the vuex action to be completed, but i need to know if registration went well - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828
I am using vue.js 2, vue-router, vuex
Thanks
You could use something like Sweet Alert to display a success or error dialog. It supports Ajax requests so you can display a "your registration is processing, please check your email" message while it is being handled.
The first approach is suitable when user successfully registers and then redirected to login page.
Now issue how to check whether user has entered required field? So there comes form validations. You can use vee-validate plugin and it's perfect for all projects. I am using it and it has so many available validations.
With these UI validations, after they are passed successfully then only submit action will be fired or else user will be prompted for entering required field.
You can see basic example here - http://vee-validate.logaretm.com/index.html#basic-example
When action is performed,
///main.js
...
Vue.use(VeeValidate)
...
// register.vue
this.$validator.validateAll().then((result) => {
if (result) {
//done
this.$router.replace( '/login' );
}
else{
// throw error
}
Simple as that.
Try this approach if you want the UI validations on the form.
my situation is the following:
I have a project with JSP, Struts and a lot of actions. Lets say that I have these 3 main groups {contacts.do, calendar.do and notes.do} with lot of actions in each of them. I have an action unrelated to all of them but since I didn't know where to put it I just chose contacts.
My aim is after the action, to go back to the page I was but since the action is place in contacts it returns to the default action of contacts. Is there anything I could do for this purpose?
Thank you.
I solved this long time ago but forgot to post it.
What I did is to redirect the action to a new JSP page. In this one only this code:
<script>
history.go(-1);
</script>
So when the page is load, it goes back to the previos visited one, as I needed.