Let's say I have 3 route url as following.
<router-link to="/AAA">AAA</router-link>
<router-link to="/BBB">BBB</router-link>
<router-link to="/CCC">CCC</router-link>
From "AAA" I am selecting one id, let's say project id.
clicking on project from "AAA", I am redirecting to "BBB/Project/454" where 454 is project id.
Now I need to update router link "/BBB" & "/CCC" to be like "/BBB/Project/454" & "/CCC/Project/454". so that when user clicks on those links, project id persists.
How do I achieve this in vue router and router-link?
Vue router-link is reactive just like the rest of vue.
You can easily use a dynamic route by passing a variable in like <router-link :to="myBBBLink"> where myBBBLink is the variable holding your desired route path.
Also check out named routes (https://router.vuejs.org/guide/essentials/named-routes.html) which might be more appropriate for your use case.
Depending on where your router links reside you can either directly manipulate the :to targets or use a global state store (vuex) as EvilArthas has suggested.
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.
I'm trying to create a simple nested routing:
App (root component, main navigation)
Topic1 (sub-navigation)
Topic1/Sub
Topic2
My demo on Codesandbox has the following issues:
1. When navigating from /topic1 to /topic1/sub, I expected the content from topic1 to show up and the content from topic1/sub to be shown below, like this:
However, Topic 1 does not show anymore.
2. How can I avoid showing "App" twice?
I know I've added path: "/topic1", component: App, but only because without it the routing did not work at all. As per the comments in router/index.js:
component: App, // Option 1 - Navigation to topic1,2 and /sub works (why?) 'App' is displayed twice
component: Topic1, // Option 2 - Navigation to /sub does not work but at least 'App' is only displayed once
I seem to be missing something essential - thank you already for any answers.
App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn't use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.
Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:
<h1>Topic1</h1>
<h2>Topic1 Content</h2>
<p>
<router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>
Here is the working codesandbox.
Also I refactored a bit your router index.js.
I need to create a fully modular Vue project and I can't figure out how do I add or remove routes when there is a new component or a component is deleted.
Now I statically type all the routes that are available in my Sidebar menu. Let's say there are 10 menus in my sidebar, it means that I should type 10 routes in my routes.js file.
But I need this project to be modular. By saying modular what I mean is, I need to give the component list to the project, I think that I should do that with a .json file and let's say this file says that it has only 5 component available, then the related routes will be dynamically created in the routes.js file, and when one of them is deleted, the related route should be removed from the routes list as well. That is what I want.
I want to do that because I develop a single frontend with Vue for more than one device. These devices may have different options and menus, when the device and the frontend matches, only the available menus will be put in the sidebar, so I can't type all the routes statically as I've been doing the whole time.
Any advice would be appreciated.
You can loop through a list of routes and use the router.addRoute function to dynamically add them to your router instance (requires vue-router 3.5.0+), instead of loading them by default. You could do this from the created() hook of your main layout for example.
// app.vue
<template>
<router-view />
</template>
<script>
export default {
created() {
let routes = loadRoutes(); // insert your own function to get the correct routes here
routes.forEach(route => this.$router.addRoute(route))
},
};
</script>
If you need to be able to switch between different layouts on the same device (like a shared terminal for managers and employees) you can reset the routes array by creating a new router instance, or removeRoute (if you use v4.0+).
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
I am using vue.js and vue-router. I am trying to achieve the following:
I have a top navigation bar with navigation links. Some of them are links to other client-side routes so they are basic vue-router router-link component except one which needs to point to a component with the same id attribute value on the same page.
First, I have coded it as an HTML Anchor Element, a, with an href attribute value equals to the id attribute value of the target component.
Alternatively, I have tried to use a router-link with to attribute has the /, home path concatenated with href (id) value, so, /#target_id.
First way resulted unsuccessful on the routes other than the target element resides in, a bit obvious.
Second way also unsuccessful. It does not work even on the route that contains the target element, though updates the address bar properly. It also cannot reach to the target element from the other routes that do not contain the target element by ending only on the route with target element at the top of the page.
How to tell vue-router to not only reach the route and render the corresponding component but also follow the hash parts and reaching to the correct region on the page?
Probably I can render navigation links conditionally as anchors or router-link with respect to the current route, and then can invoke a window.location related change on a vue component lifecycle method on the target containing component. Or just use some vue component level or applicaiton level routing hooks.