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?
Related
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
This question already has answers here:
Mount react-admin under /admin
(4 answers)
Closed last year.
I am trying to integrate react-admin into an existing react app and am able to get the basic starter pages up and running , however, after adding a dummy resource and clicking on it in the UI, I am redirected to http://my-application.net/[resource name], which is incorrectly showing my applications error page.
I am trying to set up react admin in a sandbox-like scenario to avoid conflicts with some custom stuff I'm using for routing* and I currently have things set up to display react-admin under the /admin path in my app. Is it possible to tell react-admin to prefix all of its links (i.e. when clicking on a resource) with admin so that my app can correctly detect and route these pages to react-admin? For example, in the scenario from the last paragraph, when clicking on the dummy resource, i want it to direct me to http://my-application.net/admin/[resource name] instead of http://my-application.net/[resource name]
The closest I have been able to get is this SO post, which talks about adding admin/ as a prefix to the name of all resources. I have been able to make this work with some tweaks to my routing configuration to send all /admin pages to react-admin, but changing the resource names like this also has the side effect of changing them in the UI (i.e. my users resource appears as admin/users in the sidebar of react-admin)
Other things I looked at that didn't seem to be useful:
Using the customRoutes prop in <Admin>
<Resource>'s props seem to be intended more for tweaking the end of urls for different CRUD operations
this SO post seems like it might be about something different since this is the first mention ive seen of UrlField.
Does React-admin have an option to automatically add a baseUrl to all it's links?
* While not relevant for this question, the reason I am trying to do things this way is because my routing system (UniversalRouter, see here) is redux-based and appears to directly conflict with some of the redux state that react-admin needs according to the Using redux in a custom app tutorial.
An answer I found from a post the StackOverflow "related" sidebar seems to suggest that the history API has this kind of functionality:
The only other thing I can think of is properly configuring baseName in your history.
referring to this line in the OP's question (variable name changed for clarity):
const newHistory = createHistory({ basename: '/myadmin' });
Passing this modified history into react-admin's Admin component seems to achieve the intended behavior where clicking on resource links now correctly redirects to that resource underneath the specified baseURL.
<Admin ... history={newHistory} ...>
This is also mentioned in this other answer, which is way more concise than mine or the one i based this answer off of.
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 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!
I'm trying to build a simple web app with VueJS. Until now, I've been able to follow the documentation.
My Problem
I want to implement a generic page template that fetches the page metadata from my database.
However, pages are at the top-level of the navigation (/), so I can't use Vue route parameters to dynamically fetch the content from my database, because some of the pages have their own templates.
What I've Considered...
I've considered doing the following to get around the problem:
Implementing top-level parameter like this...
{ path: '/:slug', component: User }
..but this doesn't work for some reason.
Using a slot in the page component for the custom content, and just creating a new component for every page, but I want to stay DRY.
...but I don't want to have to create a new component for every page.
My Question
How do you implement top-level paging with a database backend in VueJS? Am I missing something simple here?