I am working on a single page application with vuex and vue routing.
Current Setup:
navigation via dropdown menu and matching searchstring from a textfield
on search-btn click navigate to a result page with the search-text as parameter
in the created() method of that result page fire action to the api
-- if the request was successful continue to load the page
-- if the request was not successul redirect to a "NotFound" error page (for example misspelled word was not found in database)
the problem
I cannot navigate back again once I hit the NotFound page. It will try to load the previous page with /result/wrong_word path that will again lead to the NotFound page. How can I solve this? Is there a way to manipulate the history stack of vue router?
in router.js:
mode: 'history'
Related
I'm loading my routes through an API. This works just fine as long as you're starting the page from root #/, and I can load pages through <router-link> just fine (i.e. #/SomeSubPage).
The problems appears when trying to go to #/SomeSubPage directly (permalink to http://mysite/#SomeSubPage), or when clicking refresh in the browser when you're on the route.
I understand that this is because the routes are loaded from API, which means they are not available on the initial page load, so vue-router doesn't yet know about them.
An example of how the routes are added is:
fetch('http://mysite/api/routes').then(response => response.json())
.then(function(myRoutes) {
myRoutes.forEach(function(myRoute) {
router.addRoutes([{
path: myRoute.path,
component: () => import('somecomponent.vue')
}]);
});
});
Seing as this is loaded async and not loaded until after the route is first initialized, any request to #/SomeSubPage are not caught because the route definition is not yet ready.
Is there a way to make vue-router refresh itself when a new route has been added, so that you can go to #/SomeSubPage and have it work on the first try?
(Using React) I have a /login route and a /signup route to display Login and SignUp components. In my Login component I'm using Auth0's Lock component to display a login form and I'm also using the container configuration option for the form to be displayed in my own div rather than as the default modal.
When my Login component loads for the first time (or after a refresh of the /login route) the Auth0 Lock component loads correctly. My problem is when I navigate from the /login route to the /signup route and then back to the /login route and the Auth0 Lock component does not load at all. When inspecting the page I can see that my container div is empty.
I've found this issue on Auth0's github of others running into the same problem using Angular, but their solution is to set auth.config.auth0lib.$container to null which doesn't seem to be a good solution.
After looking through the auth0 Lock source I found the hide method which has solved my problem:
hide() {
closeLock(this.id, true);
}
In my Login component I override the componentWillUnmount method, get a reference to the Auth0Lock, and call hide():
componentWillUnmount() {
this.lock.hide();
}
Now when I navigate away from my Login component at /login to another route and then back to /login the Auth0 Lock component reloads and displays correctly.
I'm trying to figure out how to structure the frontend part of a web application using typescript, preact and preact-router. I've come a long way but I still need to figure out how to programmatically navigate (redirect) with preact-router. I can do history.replaceState(null, null, '/#/redirectedUrl');, but while that changes the URL in the location bar, preact-router doesn't route to the new URL.
What is the preferred way to programmatically navigate when using preact-router?
Importing the function route from 'preact-router' is the way to go:
import { route } from 'preact-router';
route('/url/to/rout/to');
You can do it in two ways based on your need
import { route } from 'preact-router';
route('url');
This will create a pushState in the history (i.e.,) it will create a new entry for this url
import { route } from 'preact-router';
route('url', true);
This will create a replaceState in the history (i.e.,) this will replace the current page url entry in the history with the url you will be routing to. You can make use of this in cases like, when routing from login screen to your home/dashbaord screen, where on click of browser back button, you don't want user to go back to login screen once the user has been logged in (thus replacing the login entry with your dashbaord entry).
So i am trying to make it so when the user hit one of the profiles, they get pushed to the profile page of the user the click on.
I am using currently using this set of code:
const self = this;
browserHistory.push({
pathname: '/users/' + self.props.user.username,
state: {_id: self.props.user._id}
});
Which just enter the correct url in the url bar. Although, the page does not load/reload. So i manually have to reload the page to get into the userprofile
Thank you for your time and help
tl;dr
You have to use a router which works properly with Meteor, right now FlowRouter is the best option to go
Reloading the page is not the expected behavior when route changes in Meteor, only the content of the page should be change to match the new route. Because apps created by Meteor are Single-page application, meaning that all content/code of your app are loaded at your first load.
After the first load, all required code for your app to work are already in client so when route changes the required content will be compute and put on the page, no request will be send to server.
I am not sure if I understand well the situation with pushstate and routing but I am stuck trying to route a single page app using either pagejs or grapnel or other similar javascript routers.
What I want is to be able to navigate through my program and through manually entering routes in the location bar (so I can send links to various parts of my spa to third parties). I cannot navigate manually to the /test route for example with the below code.
The following is an example with pagejs.
I have also made my nodejs backend to redirect to /#login if it gets a request for /login.
How can I utilize pushstate so that I can both enter a manual address in the location bar and navigate through it from the router and html links?
What am I missing here?
Some sample code:
page('/',index);
page('/signin',signin);
page('/test',test)
page();
function index() {
console.log('in index')
new WelcomeView();
console.log('rerouting');
page('/signin');
}
function signin() {
console.log('in signin')
//new SigninFormView();
}
function test() {
console.log('in test');
}
in welcome.html
click lets see
in app.js (server side)
//router redirect to webapp
app.use(function(req, res, next) {
const redirectUrl=(req.secure ? 'https://' : 'http://') + req.headers.host +'/#'+req.originalUrl.substring(1);
res.redirect(redirectUrl);
});
This has the following outcomes:
1) navigating to / I get the welcome page and a console log that it has navigated to the signin route
2) writing the link manually /signin in the location bar I again navigate to the / route which redirects
3) writing the link manually /#signin in the location bar I again navigate to the / route which redirects
4) clicking the link in the welcome.html again redirects me through the / route
5) clicking the link in welcome.html and changing it to /test works.
Whenever you (manually or otherwise, usually by setting window.location = 'myurl') change anything in the address bar, the browser will always make a request for that, afaik there is no way around it, and if there was, it would be a security issue, as pages could hijack your browser, by not allowing to navigate away to any other url. If you want to be able to load a particular url in your SPA by typing it in the location bar, you need the server to respond with something. In an SPA, you would typically return the same html that loads your SPA. Now, it seems like pagejs doesn't' respect the url in the location bar, and keeps loading / (I believe I've seen that before), as a workaround, you can try setting page() to window.location.pathname when your app loads, and see if that will fix your second issue.
Also, hashbang urls, arent enabled by default with page, you need to enable them with page({hashbang: true}).