I am currently doing a project with NextJs about a blog posting application similar to medium.com. However, I am facing a little problem when it comes to dynamic routes.
Background Info: My pages structure looks like this:
pages
|-> profile
|-> [username].tsx
url path example: /profile/[username]
Use case: I am in the profile page of someone (/profile/someone), and in the navbar, which is globally accessible, you have the ability to go into your profile (/profile/yourName). Howerver, if you click View Your Profile, the url does update, but the page does not appear to load and therefore, you cannot see your profile.
Original Code:
<Link href={`/profile/${username}`}>
<button>View Profile</button>
</Link>
Current Solution:
if (router.asPath.includes('profile'))
router.replace({
pathname: '/profile/[username]',
query: { username: username },
}).then(() => router.reload())
else
router.push(`/profile/${username}`)
The solution provided works, but load times significally increases when compared to the "Original Code" block or when asPath does not include 'profile'. I think this is because I am using reload(). I want to know if there is another solution that will improve loading time.
Thank you
Related
I have a Laravel + Vue site that allows users to book on to training courses. A typical course URL might be www.mysite.com/courses/a-great-course. This is set up in my router.js file in the usual way:
path: '/courses/:slug',
component: Course,
name: 'course'
with the slug naturally being pulled from the database.
I have a standard vue-router catch all route defined that works fine for the first level of the URL and diverts to a Not Found page, but if I ask for a course that doesn't exist - www.mysite.com/courses/wrong-course - it still loads the page and just sits on the loading animation.
As I understand it I need to implement a navigation guard but I'm completely confused as to how to do that - it seems all the online examples deal with situations like checking if a user is authenticated in the Store.
Can anyone give me some pointers?
I've been trying to rework an app to use the new session auth system.
Everything seems to work fine, however I am not able to use the Navigation (polaris) component successfully.
Let's say I have something like this :
<Navigation.Section
items={[
{
url : '/faq',
label : translations.faq,
icon : HintMajor
}
]}
/>
If I only put /faq I am unable to access the route. I am redirected to /auth and get obviously an error.
The only way I manage to make my routes work is to :
Add the shop query in each url like this :
// ...
url : '/faq?shop=${shop}',
// ...
Add every needed routes manually in my server.js WITHOUT the verifyRequest middleware (which does not seem like a good option to me)
// ...
router.get('/faq', handleRequest)
// ...
Can someone explain if I am doing anything wrong ?
(I am managing my SESSION_STORAGE with the custom redis storage shown in the repo doc https://github.com/Shopify/shopify-node-api/blob/main/docs/usage/customsessions.md)
Are you not supposed to have a wildcard in your App routes so that when you deliver backed end code it is doing just that, and leaving authentication to having the token in your header? No token and a request for anything authenticated and you then direct to login?
When I build my VueJs application, it automatically imports the app.js and chunk-vendor.js files with the preload attribute. This is great as it speeds up the page load time of my application.
I've looked at #vue/preload-webpack-plugin and I can see that I can preload specific webchunks or assets. This has the effect of preloading those files on all routes.
The thing I would really like to do is preload webchunks based on the initial route that is loaded (the first route the user visits).
Lets say I have two routes; home and accounts. Both of these routes are lazy loaded. When a user opens /home as their first page, I would like to preload the js and css webchunks related to the homepage. If the user initially opens the /accounts page, I would like to preload the webchunks related to the accounts page.
Its not possible to use wildcards in preload statements, so I know I can't do this statically.
Any ideas of how this could work? Has anyone heard of such a project being suggested elsewhere?
EDIT: Something I tried as an experiment was injecting preload headers into my index.html file using the beforeRouteEnter method. Whilst I could see the preload header in my DOM, I found that browsers did not observe the header in time, so the image I was experimenting with was not pre-loaded. In any case, this wouldn't have worked for a dynamically named file, but useful to know.
With SSR it is possible and framework like Nuxt does it automatically, because it builds separate html file for each route. So this html can be "tailored" for this specific route and include/preload all the code route needs...
Without SSR it much harder. #vue/preload-webpack-plugin works by injecting preload links into the index.html at build time and since there is only one index.html for a whole app, you can't make it route dependent (with this plugin). So what Vue CLI does is prefetching all the async chunks by default (clearly preferring speed over bandwidth usage)
I can imagine a solution in the form of Webpack plugin, which replaces preload-webpack-plugin and instead of generating preload/prefetch links at build time just generates some inline script with the map of "route name => chunk name" (some well defined naming convention would be needed) that would inject the links dynamically to the DOM base on the current URL. But even with my "googling skills" I wasn't able to find anything like that...
I have a webpage with a fixed Header. There I have the items "Main Accounts" and "Sub Accounts". The pages are completly the same and have the same functionality except that they call different routes of the API to fetch different data. I dont want two different files for that. Everything should be one file and I just read a variable and change the url depends on that.
My header has some nav-items:
<b-nav-item to="/accounts">Main</b-nav-item>
<b-nav-item to="/accounts">Subs</b-nav-item>
Now I need to pass a variable to that redirection, that I can read in the accounts page and then change the link for getting datas.
I tried so far:
<b-nav-item to="/accounts?main=true">Main</b-nav-item>
<b-nav-item to="/accounts?main=false">Subs</b-nav-item>
I can read the parameter in that url with this.$route.query.main, but my problem is, the page doesnt reload, if I switch between the 2 pages. The url is changing, but I dont know how to react to that change.
I tried it with a click event and force reload:
#click="$router.go({path:'/accounts', force:true})
but that forces to reload the complete page.
My favourite solution would be to create a folder structure or whatever. Then have two routes:
/mainaccounts and /subaccounts but both lead to the same file and in that file I read that the parameter and then decide what route I have to call depending on the link
Okay, found a solution.
I created the following file tree:
accounts/_test/index.vue
And in my header I have a nuxt-link:
<NuxtLink :to="{name:'accounts-test', params: {test: 'main'}}>
And it works as expected.
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.