Is it possible to use Vue router with such urls?
first page - /index.html?mode=api&tab=program
second page - /index.html?mode=api&tab=users
third page - /index.html?mode=api&tab=contact
etc.....
As you can see the changes only in params "tab".
Depending on that you will see the page. I can't find such example.
Related
By default, nuxt adds a route for each page in pages.
I want to make when going to the page e.g. project.local/id/ec29cjsa5fas512ik, the user goes to a page template and the Vue receives this ec29cjsa5fas512ik id from the url so it can make proper API calls later.
You can make a dynamic page in Nuxt2 with the following file, eg.
/pages/details/_id.vue
then you'll have a path like /details/:id.
More info can be found here: https://nuxtjs.org/docs/features/file-system-routing#dynamic-routes
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.
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!
Is there a way to open a modal automatically by first evaluate the URL for parameters?
For example:
Visitors to the site with URL : example.com don't see the modal. They just see the regular site.
Visitors to the site with URL example.com?token=abcd123 or example.com/token=abcd123 see the regular example.com site, but with a special modal over the top when the page loads.
How do you do this with vue?
If you are using Vue Router, you can extract the parameter from the route object.
console.log(this.$route.query.token) // abcd123
If you can extract it, you can see if token has any value, and if it does, display the modal. Do the logic inside the mounted() method.
I want to remove hash(#) from url in vuejs using vue-router in Laravel. So I used mode:'history' or history: true
const router = new VueRouter({
routes: routes,
mode: 'history'
//history: true
});
and it works perfectly but the problem is that each time request is changed for example from example.com/home to example.com/user the request will be sent to server and all the page will be refreshed however I want to only change the content between head and foot of the page. So when I mark an string in the top menu it will not unmarked when going to another url but now it sends the server and the page loads completely when not using mode:'hash'.
How can I remove hash without sending another request to server in order not to load the page again completely and load only body part?
Thanks
I don't have created links yet I just change it manually in url. If you are saying that doesn't work manually so why it works with mode: 'hash'? So if router-link works just like that I should use it I think. I didn't know about that
ok… I get it
if you are using history mode, you have to use <route-link> because, as noted above,
In HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page.
When you enter a new url, the browser loads that page, that's the browser's way of operating and you can't get around that. The framework however handler it differently, by updating the url and the content, but not actually redirecting(reloading)
The reason why this works with the hashbang, is that the broser treats everything after the # character as in-page navigation. Meaning it doesn't consider it as a redirect. The hash character was traditionally used in HTML to allow navigate to items within a page.
For example, about-us.html#contact redirects a user to the about page and scrolls to the contact form.
The modern js frameworks use the hash to hack this navigation by not redirecting, and using the content after the hash to pass routes.
For example, if you have a route such as localhost:8080/#/about-us, the localhost:8080/# part is the same as localhost:8080/index.html# so changing anything after the # character keeps the browser on the same page, and the javascript (vue router) handles any changes that are needed.
Hope this clears it up. Fwiw, I haven't used history mode on any of my projects.