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.
I'm learning Nuxt.js and I'm puzzled by how difficult it seems to be to simply redirect a user to another page from a method that is triggered via a click.
Here is the set up: I'm using Nuxt Auth to authenticate users, once authenticated I want them to be forwarded away from the signup page to another route. I already have middleware set up that redirect logged-in users, but it is only triggered when I refresh the page, not when I first log them in.
I have a method like this:
async login(event) {
event.preventDefault()
try {
await this.$auth.loginWith('local', this.loginData)
// this is where my redirect logic should go
} catch(error) { ... }
}
So far I've tried using this.$nuxt.refresh() which doesn't do anything at all and I've also tried this.$router.push('/route') which seems to hang the page completely. Ideally, I would prefer the refresh approach so that I don't have to specify the landing page for logged in users in multiple places, but I also need to know how to use redirections inside methods, I would have thought it should be the most simple operation imaginable and yet it seems to be difficult to find.
Any tips would be highly appreciated!
UPDATE:
I've found a solution, although it's not an ideal one. I've added an if-statement into beforeCreate that checks this.$auth.loggedIn and if it's true, then it calls this.$auth.redirect('home') when "home" is defined in nuxt.config.js under auth redirect. The reason this solution is not ideal is that it relies on the auth module (as opposed to being a general redirect mechanism).
There's a way in Nuxt to reload the page like so:
this.$router.go(0)
also you can find more information here
if this.$router is not working, try this
this.$nuxt.$options.router.push(url);
I am using vue router and have already set mode to history. My app works fine except that when i try to use hash (#) in url in order to scroll the page to an element in the same page (eg: #information) the page reloads (meaning it re-requests data from my backend). I think the router thinks the page has changed and tries to load that page.
EDIT: The page does not really reload. It re-fetches data from by backend. I understand this as a reload though.
I tried googling but all i get is how to use history mode. Maybe i am searching the wrong way.
Any clues on how to fix this?
Here is my route:
{
path: '/p/:idormpn/:slug',
name: 'Productpage',
component: Productpage
}
Here is an example of what is happening:
https://www.e-checkout.gr/p/63529/dermatina-anatomika-pedila-mavro
Thanks!
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 build Web application using Sencha Touch2.
At iPhone, the application can be used by full screen.
I already have build web application for pc browser, and use google calendar API connecting with OAuth2.
The authorization step need to open new window to login the user google account.
Maybe I can build Sencha Touch application use the same architecture of pc,
but opening new window make the full screen application closed.
Do you know how to use google OAuth2 in a Sencha Touch2 application?
-- Add 2013/2/6
My Sencha Touch2 application is web application.
I want to know that it is possible to grant permission in the full screen web application, not in the browser.
-- Add 2013/2/7
I use the tip.
http://miketheindian.com/2012/02/22/staying-in-full-screen-mode-on-the-iphone-from-page-to-page/
This way is not need to open browser.
It is better than opening new window, but the best is authorizing in iframe...
-- Add 2013/2/13
Finally, I take the way;
Google AOuth is three patter, for user.
1.User google Account is logout, user must write user ID and password.
2.User google Account is login and but the application is not allowed, user must click "allow" button.
3.User google Account is login, user do not need to do anything.
When the time of 3., we can authorize in iframe.
And, when the time of 1. or 2., we can not authorize in frame, so use location.href change approach ( detail in http://miketheindian.com/2012/02/22/staying-in-full-screen-mode-on-the-iphone-from-page-to-page/ ).
Details
make view has the container
{
xtype: 'container',
html: '＜iframe src="" id="googleLogin" style="border:0;">'
},
change src in controller
var iframe = Ext.get(Ext.query('#googleLogin'));
iframe.set(
{
src: responseInformation.googleOAuthUrl
});
When the time of 3., user google account login , this is ok.
When the time of 1. or 2., we change location.href.
We want to handle iframe "onerror" event, but there is not that event.
I use settimer and check if the src of the iframe is not change first src (because of error redirecting to google login page).
3000 ms is not so meaning. When the time of 3., redirect is success and page has changed.
me.timerId = setInterval(function(){
if (iframe.el.dom.src.indexOf( /* first url */'') !== -1){
location.href = iframe.el.dom.src;
clearInterval(me.timerId);
}
}, 3000);
On Android, it's probably a good idea to use the local Contacts database on the device rather than working over the network. Yes, the user has to grant permission, but they would anyhow for network access. That way you don't need to spin out any extra browsers or anything.
There is another way to face the problem:
Use inAppBrowser plugin from Cordova or Sencha to launch the auth prompt, then, with a eventListener, wait for page load, and if url matches the success callback URL, then you can parse the url and get the auth/code or auth/token.
Example using Cordova:
window.authmodal = window.open(authorizationUrl, '_blank', 'location=yes');
window.authmodal.addEventListener('loadstart', function(event){
var code = getParam(event.url,"code");
if(code != null){
//here we got the code, now make a last request to get the TOKEN
OAuth2Helper.finish(function(token){
window.authmodal.close();
window.localStorage.setItem("token",token)
//do somethink else with your logic
},code)
}else{
//no code found in this page start.
}
});
NOTE: OAuth2Helper.finish, makes a request to the token url, using the code, in order to get a valid and usable token.