I'm working on a Vue project and I've got an issue.
I would like to prerender some dynamic routes when I am in a particular route.
In my project, I have a /works route which displays a list of several items. Each item
has a router-link that sends to his /work/workID route and renders the workpage component. As this is a dynamic route, Vue does not prerender these routes and each time I load, I have a 500ms delay of images loaded.
My images url are store in Vuex and the images are upload in a public google drive folder.
I think that I should use something like that :
let matched = router.resolve(work/workID).resolved.matched;
let route = matched[matched.length -1];
route.components.default.render;
But my images are still loading on mounted.
Hope someone know the issue ;)
Found a way to resolve it.
I declare my dynamic route props to true, then render and hide all the dynamic components in my works pages. That work perfectly.
I can't find the way to pass route params or even props to a component with the router.resolve(path) method. Someone would know how to do ?
Related
I have an app with react-router-dom and use the BrowserRouter component. In the app, I have route /query-builder that will essentially build a query string through picking values from tables etc. Once the user has the query string built, they can navigate to /search?q=<some querystring> via the useHistory() hook from react-router-dom and history.push('/search?q=${queryString}').
What I would like to know, is it possible to navigate back to the /query-builder route, via the browser back button, and see the page as it was just before I navigated to /search so the user could make amendments to the query. What I am seeing at the moment, is that the query-builder component will go back to its initial state, as it is mounting again.
I could use redux to manage the query builder state and rehydrate the components from that, but I am wondering am I missing something available in the react-router / react-router-dom packages?
Look like useContext is best variant to solve your problem. Save variables in query-builder, then you can easily go back without any scare) Also it'll work properly both in history.goBack() and browser back
I am learning Angular 7 by studying this example app. The example app uses a wildcard route to handle all otherwise-unhandled routes.
Specifically, this app-routing.module.ts directs all miscellaneous routes to AppConfig.routes.error404, which is handled by Error404PageComponent.ts, which then ultimately serves up error404-page.component.html for every possible route that is not specified by its own component and named route.
What specific changes would need to be made to the code in this sample app in order for the wildcard route serve different static content for different submitted routes?
For example, if a web user typed in the route /i-am-a-jelly-donut, what changes would need to be made so that the request would 1.) continue to go through Error404PageComponent.ts, but have the user's browser receive a new i-am-a-jelly-donut.page.html instead of the error404-page.component.html view?
The Error404PageComponent.ts would still serve up error404-page.component.html for every non-specified route. However, we would be adding logic to give special handling inside Error404PageComponent for a specific static route in addition to the logic for every non-specified route.
The goal here is to be able to handle static routes without having to create a separate component for each and every route. Think, for example, of a blog where most of the routes have an identical template, but with different content in each blog entry.
Templates are compiled into the components at build time and you are not going to be able to change which template a component uses at runtime but you can hide and show sections based on conditions. Inject the router into your component
constructor(private router: Router) {}
Now you can set a variable on your component based on if the route contains 'i-am-a-jelly-donut'
jellyDonut = this.router.url.indexOf('i-am-a-jelly-donut') !== -1;
and in your template
<ng-container *ngIf="jellyDonut">
Jelly Donut
</ngcontainer>
<ng-container *ngIf="!jellyDonut">
Other stuff
</ngcontainer>
I working on a webshop in Vue js, and when i add products i use event bus and then i add the products to the CartComponent by event bus. And its working, but when i go back and add a new product or just go back so the page reload all the data in my CartComponent is deleted. How can i do so its never delete the data it got?
I have tried to surround the component with
<keep-alive>
<CartComponent />
</keep-alive>
But thats not working.
Can someone tell me how to do so the component not delete the data when i switch routes?
The bus is a communication hub, it does not store the information for you.
You have a couple of ways of tackling this:
implement your own module where you store this information. When you update the cart also update your module. Or
use Vuex, which as a store implementation. All your info should flow thru the store. It is persistent and globally available. More about Vuex here
I highly recommend using Vuex.
I am using Laravel Nova custom tool which uses vue js for custom functionalities.
There is a tool.vue file inside of the component after creation, that everything handles there. The thing is I would like to have different templates (vue files) and render them whenever they are needed.
In this case my main tool.vue is a search with dropdowns which I completely implemented. But I want to render the list of the results from a different vue file after clicking on a button. (of course the other vue file will consist of a table or something to show the data).
The question is how to handle this with vue js and how can I change between components ? and how can I pass paramters/data from the main vue file into the result page so I can do ajax requests or etc.
You might want to use a good router for handling the pages dynamically and in SPA format. Seems like Laravel Nova is using vue-router.
It is installed under the custom component as you create it and if you want to use other vue files or switch between them, you need to add your route under nova-components\[your-component-name]\resources\js\tool.js file by adding an object into the array of routes in this format:
{
name: '[route-name]',
path: '/[route-path]/:[sent-prop-name]',
component: require('./components/[your-vue-file]'),
props: route => {
return {
[sent-prop-name]: route.params.[sent-prop-name]
}
}
},
After adding the router to this file you can always use <router-link></router-link> component inside your Vue files to redirect to whatever route you desire (you can also send data to the route as props). The main format of it is like this:
<router-link
class="btn btn-default btn-primary"
target="_blank"
:to="{
name: '[destination-route-name]',
params: {
[your-data-name]: [your-data-value]
}
}"
:title="__('[your-title]')"
>
Submit
</router-link>
P.S: Of course you can omit props and params from both if you don't intend to send and receive any data to the file.
P.S: You can always take look at vue-router documentation here for more features.
I am trying to archive dynamic routing in my Angular application. I have completed following functionalities so far.
Add routing to an existing angular component by user input.
Remove routing from an existing angular application.
I have used router.resetConfig to do this.
My problem is that whatever the new dynamic route I have added cannot be accessed by typing in the URL. it gives me following error.
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'module3'
Error: Cannot match any routes. URL Segment: 'module3'
Here is my code
app.module.ts
const routes: Routes = [
{
path: '',
component: Module1Component
},
{
path: 'module2',
component: Module2Component
}
];
app.component.html
<div>
<h2><a routerLink="">Module1</a></h2>
<h2><a routerLink="module2">Module2</a></h2>
<h2><a routerLink="module3">Module3</a></h2>
<input type="button" value="add module 3 to route" (click)="addRoute()"/>
<input type="button" value="remove module 3 from route" (click)="removeRoute()"/>
</div>
<router-outlet></router-outlet>
app.component.ts
addRoute(){
let r: Route = {
path: 'module3',
component: Module3Component
};
this.router.resetConfig([r, ...this.router.config]);
console.log(this.router.config);
}
I have found that after trying to access the newly added route by typing it in the browser URL the newly added route object disappears from the route array. Hence I am getting that error.
Following image is before I add the dynamic route object
This is after I add the route object
But when I try to access the /module3 route by accessing it in the URL,
it just reinitializes the route object array and therefore it doesn't contain the newly added route.
My question is how I can persist this newly added route to the initial route object array. So that it will be there when I try to access it by URL.
I have added sample angular project for this scenario in the following GitHub repo.
https://github.com/mal90/ng-dynamic-route
If anyone can point me in the right direction is much appreciated!
Angular is a client side framework so when you add a new route dynamically it's only effective as long as you do not try to access a page from a server request, which is the case when you enter a URL in the browser
As David pointed out, your approach is precise headshot for Angular app. Looking at your profile, you seem to know about Node.js and you have rather good score, so I presume there must be good reason for you going with this highly specific road. If you really want to do such a crazy thing (I cannot see the reason why to do it ... I think you should rather use server-side solution) you might try storing the router definitions in some local storage or external file and force app to redirect any path to some specific route, then to force the app to redefine the router, initialise it again and only then navigate to the new component. As you can see, you will need a lot of force to do this. Some people had already similar ideas. Such as in this post about external definitions Do not take me wrong, I like crazy ideas. You could probably hack the environment somehow. But I think it is not worth it.