I am trying to change dynamically the meta tag with Vue router and it is working, I followed this article. The problem is that it works only if I change the route from a router-link if I enter directly the URL the first load page wouldn’t take the dynamic meta tag.
Is there a way to run this navigation guard also when I enter directly the URL?
I had the same problem and I solved it creating the instance after the router.beforeEach.
So it should be in this order that:
• create the new VueRouter
• do the router.beforeEach
• create the new instance new Vue
Related
I open my project locally like this
http://localhost/#{"id":5}
but once I navigate somewhere via router-link the /#{"id":5} disapears from URL and I am left with something like this
http://localhost/page
but I would like it to be like
http://localhost/page/#{"id":5}
These ARE NOT params provided by vue router, but custom "global" params that our team utilizes.
Basically I want whatever was provided after the hashtag to be copied over to whenever I navigate with router but I can't wrap my head around Router.afterEach and modifying window.location.href directly leads to all sorts of disaster
Note that these are not vue router params, but basically custom text, I DO have routes WITH params like http://localhost/page/1/#{"id":5} and it works just fine so all I need is to copy my own json at the end of the link and paste it to next route somehow.
When an update for my app is released, I would like all users to access the new version asap.
I'm looking for a way to disable all nuxt-links normal internal routing and reload the page to the new url when an update is detected.
Is it possible to change this globally? (without adding code to every nuxt-link):
Remove the nuxt-link bahavior from nuxt links that are already <a href links?
Update the nuxt-link behavior to do a location.href = instead of the internal navigation (for links on non-a elements or router.push)
In this case you could build a wrapper component that you will use instead of <NuxtLink> which contains the wanted functionality and passes props and events to the <NuxtLink> component otherwise.
Using vue-router 3.0.6
I have several landing pages, whose URLs are loaded on page load via an API.
I wait to render <router-view /> until this API call has resolved.
When it has resolved I run this.$router.addRoutes(routes)
However once router-view is render, I get a 404 route rendered.
If I navigate to the homepage and click a link to the dynamic landing page I was originally trying to access on load it works fine.
Is there some function to get vue-router to re-evaluate it's available routes, something that might be happening during the route change to the homepage that allows the next navigation to the dynamic page work?
First load -> /dynamic-route = 404
First load -> /dynamic-route -> 404 -> homepage -> /dynamic-route = OK
Old question but if anyone is stuck on this, you need to perform the operation that sets the routes before calling Vue.use(router) in Vue 2 or app.use(router) in Vue 3.
This is because installing the router plugin immediately triggers an operation to match the initial path. Since the route you wish it to detect is not registered at that time, it gets missed.
It does not matter if you show/hide the router-view component based on a flag variable since the path matching operation has already been completed by then.
when you match /dynamic-route directely, maybe the addRoutes did not work. so it would math 404.
you can make the function of addRoutes work using the function of beforeEach when you change your route.
I am having three components that load simultaneously when angular app load. Is there any way that we can load component only when specific route navigate to.
This is what the Angular 2 Router is all about. I strongly suggest you read the documentation on Router thoroughly.
https://angular.io/docs/ts/latest/guide/router.html
The steps you need to do are roughly the following:
Create a main component (ex: my-app) for your app with a <router-outlet> placeholder within its template.
Create your routes
Register those routes in your main application module
Add a reference to your main component (<my-app></my-app>) in your index.html file
Open up one of the URLs you registered as a route and the component you associated with that route will get created and inserted in place of your <router-outlet> element.
Is it possible to add an Aurelia top level component without the router?
The goal is to create a component without the router since my application doesn't need any url based navigation.
From what I can tell Aurelia seems to take you down a path where components are instantiated via routing based on how the component is registered with the router.
Instead I would like to just add markup for the top level component on the main index.html page:
<my-component bind.current="'123456'"></my-component>
I would like define components without a router and only use the templating and data binding capabilities of Aurelia.
Is that possible?
Tried this in index.html (inside the body tag of the default project)
<require from='./dist/my-component'></require>
<my-component></my-component>
But it does not seem to pick it up. Ideally I would like to just define it in markup on a page served from the server since it would enable me to sett attributes dynamically on the elements
<my-component current.bind={{someServerGeneratedId}}></my-component>
In the above I would use a templating framework like mustache to dynamically render the Aurelia when the page is served from the server.
I could wrap the component in another "landing" component, but that makes it hard to benefit from setting things up with server generated bindings.
UPDATE:
Per Rob's response: https://github.com/aurelia/framework/issues/175#issuecomment-126965417
- He is expecting to add the ability to add a root component to the landing page in a future release. I understand there are ways to not use the router, but it still depends on pulling in a partial view during bootstrapping of the application. This does not use the router directly, but conceptually this is really just an implied/convention based client side nav. In the end there is a client side request to pull in the view, which means I can't generate the html dynamically from the initial server response.
Yes you can do this very easily without the router. Just remove the router configuration from your app.js and in app.html remove the router code there as well.
I think the issue you are running in to is that you are specifying the dist folder again in your index.html. You should just reference it like this -
<require from="my-component"></require>
<my-component current.bind="someServerGeneratedId"></my-component>
This will bind up correctly.
I guess you're missunderstanding the route concept here.
At the time of writing, Aurelia's index.html page is your initial page where you put your "loading" stuff and where Aurelia bootstraps the entire app.
So, you can't put a custom component directly on it, but that should not be a problem.
If you don't change any configuration on Aurelia, it will look for your app.html to bootstrap your app, and there you can have anything you want (routes or not, doesn't matter). So, you should put your component there, beside the other tags/components/etc you need.
I've made a plunker without any routing and with a custom component in the app.html, and something simulating what you need.
<template>
<require from='./my-component'></require>
<my-component current.bind="serverGeneratedID"></my-component>
</template>
http://plnkr.co/edit/mLb8Ym638b4V2e9LDp0A?p=preview
If you need anything else, comment here and I'll try to go further.