I am using Aurelia for my project,Now I have problem in navigating to previous page.I want to know are there any ways to get that previous router information from Aurelia router object.
this.router.navigateToRoute('test', {});
I read some github issue related to this, but I couldn't find solution.
furthermore are there any way to got that previous router state from below mention code.This code I got from github
router.currentInstruction
adding my comment as an answer so you can vote it and close.
you can use the navigateBack function from the router instance..
Related
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 am using nuxt version 2.8.1 for my website. Everything works fine, except nuxt-link on some pages.
I have a page, /drinks which is the listing page for drinks and /drinks/{slug} which is the detail page.
I first noticed the problem, in /drinks. None of the nuxt-link was working in that page. It got solved when I removed code that displays
validation error message from the form that is in separate component.
<span class='text-danger small'>{{ errors ? errors.first('name') : '' }}</span>
So, everything works on this page now. But, the detail page still has this problem. There is no components using validation in this page. No erros or warnings, in nuxt console, or browser console. Links just doesn't work. It updates the url, but, contents are not changed at all.
changing nuxt link to anchor tags works.
Another thing is, if I click any drinks in listing page to go to detail page, it works fine. Every link works. But, if I reload that page, or go to that detail page directly with URL, then nuxt link doesn't work.
I don't know, what is the problem exactly. How can, using vee validation in one component affect nuxt link in other components? And why is it not working?
Found the culprit finally. In case, anyone face similiar issue in future.
Vee Validate didn't support ssr, thus, it caused the problem with nuxt-link.
I am using another plugin Vue Carousel which doesn't support SSR as well.
So, wrapping carousel with solved the issue.
And, another weird thing, using v-html with p tag also affected nuxt-link.
So, I removed all p tags with v-html, used no-ssr for components that does not support SSR and the issue is finally gone.
But, I still do not understand why nuxt link is affected and why there are no error messages.
In a login page, I have a Google reCAPTCHA. It works as intended, but if I navigate to another page, and then return via the browser's back button, or by typing the URL in the browser, everything works except said reCAPTCHA. For it to work again, I need to reload the page. I get the same results when using Materialize with Vue. The components won't "reset" when back on the page.
Tried to use keep-alive (even if that sounds wrong), tried various Vue lifecycle hooks (created, beforeMount, mounted), tried to keep the code in a function which I then called in the lifecycle hooks. Nothing seems to work. I searched Google and even here, but maybe I'm using the wrong search terms, as I couldn't find a solution to the problem.
Can someone shed light on the problem? I can try to provide code if needed.
It's hard to give 100% sure answer when there is no reproduction supplied but this is what might work:
Try adding key parameter to router-view:
<router-view :key="$route.path" />
Or even on a component you want to be re-rendered:
<component-with-recaptcha :key="$route.fullPath"></component-with-recaptcha>
I have a task at work, It is to implement the login page inside the Docusaurus.
I am trying to customizing the index.js by adding some HelloWorld. Including login.js which has actual Docusaurus Index page
const Index = require('./login.js');
const React = require('react');
class Button extends React.Component {
render() {
return ("helloworld");}
}
module.exports = Button;
But Error thrown is:
Error: Cannot find module './login.js'
Is it possible to call the class from another js page in Docusaurus?
Docusaurus maintainer here! Yes, it should be possible as the current module system is CommonJS. You have to put that component in the same directory as index.js. Link me to a repository if possible and I can help you take a look.
On a side note, it doesn't make much sense to build a login form for Docusaurus as Docusaurus generates a static site that loses state across page navigations unless you persist them in cookies or localStorage. It'd be quite troublesome to do so. Maybe you could explain what you're trying to build here and I can recommend you better alternatives.
I found a way to work this out, even though there is no official documentation on this matter. I used the Docusaurus Swizzle to intervene in the Root component so that I can use Firebase Authentication (I think that you can use Auth0 or any custom logic in replacement).
I wrote a detailed blog on this so that I hope it can help others, you can see it here: https://medium.com/#thomasdevshare/docusaurus-authentication-with-firebase-c824da24bc51
There is also full example source code in the article, you can clone it.
First of all. What does "login.js" look like? It is an exported module with a well defined (default) namespace?
Secondly, you shouldn't add the file extension to an import. It's "require('./login')" not "require('./login.js')".
How do I make router understand /{id}/{dateid} and something like /admin/events as two different routes? Right now it tries to load page corresponding to the first route when I try to navigate through some other routes
As stated in vue-router docs the order of the declaration matters.
the earlier a route is defined, the higher priority it gets
So making /admin/events to be before /{id}/{dateid} would solve the issue.