For example, I have a blog website, with a discover page that doesn't take any params. When you load page fetch hook calls API that randomly returns some article.
So my problem is when I'm already on the Discover page and I click discover in the Left bar I want the page to refresh.
:key="$route.fullPath" is not working for me because nothing is changing in the path.
Related
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
I published my website (a SPA made with vue) to Github-Pages. This website uses "history mode", so the # does not appear when navigating to a different "page".
When direct URL navigation (user types website.com/downloads for example) or a refresh while not on the root page happens, the website tries to display 404.html.
When the 404.html loads, it redirects to the homepage, passing the route name taken from the URL:
<script>
const segment = 1;
//Gets the relative path and the hash of the URL.
sessionStorage.redirect = location.pathname.split('/').slice(0, 1 + segment).join('/');
sessionStorage.hash = location.hash;
//Forces the navigation back to the main page, since it's the only entry point that works.
location.replace('/' + location.pathname.slice(1).split('/').slice(segment).join('/'));
</script>
For the user, it is a bit noticeable, but it will display the correct page.
But while loading, it will report a 404 in the network tab, which could cause issues in integrations with other websites.
Is there anyway to fake a 200 response when loading these pages?
This is a typical issue with Single Page Applications using history mode (history.pushState) to simulate a full URL so that a page isn’t reloaded when the URL changes.
Since vue.js is an SPA framework, it means there is only one HTML and tag containing the “app” id. Due to this disadvantage, Google bots would not be able to read the content of a particular landing page and your website might not get the higher rankings. To make Google bots read the content, you can use two method, “Pre-rendering” and “Server-side rendering.”
Also you can try using routing in <li> and <a> tags and buttons instead of href=“/path”. Using a router link makes page navigation very fast and it benefits the SEO of your website as well.
Where in the req object can I see where I came from in Express.js.
Say I have the same navbar on every page of my site, but I click on a link in that navbar. Under certain conditions, I want to redirect to the calling page instead of going to the clicked link. In the middle where for those routes I should be able to find what page I clicked on the link at in the request object, am I right?
Referer is what are you looking for. Inside your controller, If you console.log(req.headers) you will see a property referer containing the address of the previous web page.
So, in case you want to redirect back you can use this res.redirect(req.headers.referer);
I'm trying to create a route for an overlay. This overlay is toggled when pressing a button in my nav. Since its background is transparent/blur, it cannot be a separate site.
My goal is to make google register this path on my sitemap, therefore displaying it as a site link in its search results.
I am using Gridsome.
I am getting this error most of the time when I submit my form. I am using Sitefinity 6.2 with ASP.NET MVC 4.0 and JQuery Mobile.
As I have Sitefinity in Hybred mode I am using the #Html.BeginFormSitefinity() command to create the form. On the Controller I have my action with the [HttpPost] attribute. The code always hits my default action on the controller with no problem. No matter what I put in the form when I submit I only get an error message on the page...never hits the HttpPost action.
I've looked around and there are many pages with fixes for the MAC failed issue, but none are working for me. I have a machine key in the web.config and I am NOT going to set enableViewStateMac to false as that is a security hole.
OK I tried working with both of the below solutions but they are both really bad. Here is what I am doing now, which is still not great, but I have Sitefinity, MVC, and JQuery Mobile all on the same page and forms are not giving me View State Exceptions anymore.
First thing is that adding data-ajax="false" is not enough, for this to work you need to disable Ajax before JQuery Mobile starts. So, to do this you need to add in this script BEFORE the JQuery Mobile File loads but after the JQuery file loads.
$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; });
After doing this I then do not use the Sitefinity Begin Form, I just JQuery to change the form on the main page to have the correct action.
<script>
$("#aspnetForm").attr("action", "Home/Login");
</script>
Together this means that there is a complete page load for each page change, and form posts use the form declared in my WebForms Master Page.
-Old Answer -
Actually...what I have below is not working. What I am
currently doing is really ugly but is usually working.
As long as the user enters the site from the home page then the home
page is the Jquery Mobile first page. The view state errors that I
was getting was because it saw the current page as the first page and
the form submit was to the active page. What if the controller for
the home page was just set to handle ALL HTTPPost calls? I have
removed the #Html.BeginFormSitefinity() from all the views with forms
and am just using the form on my top level masterpage. Then I add in
code on the view to change the action of this form to point to the
main page controller. ex
<script>
$("#aspnetForm").attr("action", "Home/Login");
</script>
Once I made this change the forms are not throwing view state
exceptions...as long as the home page is the Jquery Mobile first page.
If the user comes in from a different page then all is scrambled.
Don't have an answer for that yet.
Really Old Answer -
OK, think I have found it. I read somewhere, lost the link now, a
list of issues that can cause the error message. One of them is the
form being submitted from a different page.
I looked at the error message I was getting with Fiddler and noticed
that the Referer was my home page but the URL of the form post was the
URL for the page with my form. In stead of browsing through my site
to the page with the form I typed the URL in the address bar. I tried
submitting my form again and now it works!
So, this is an issue of Sitefinity and JQuery Mobile fighting it out.
When asp.net MVC is run in Hybred mode in Sitefinity it is actually
run in a Web.Forms master page that contains a form. When you use the
#Html.BeginFormSitefinity() to add a form to the view it is actually
just adding a div and then using AJAX to submit the form on the
Web.Forms master page.
JQuery Mobile loads up the first page that you visit, but later pages
are just injected into the existing page. So, there are multiple
data-role="page" divs loaded up in the DOM, inside of the Sitefinity
Web.Forms Master Page.
This all together is causing the form to post with the URL of the
active data-role="page" but the server sees that it is being refered
from the original page I loaded up. So, if I went to the page with
the form first all would work, start at any other page it does not
work.
Now that I know this I can put in data-ajax="false" on the link to the
page with the form and all looks to be working. This will cause
JQuery Mobile to not inject the target page into the current page but
will load all fresh with the target.
data-ajax="false" is the answer!