When I click on a link in my Vue app, it returns to the initial route where it is coming from.
I do not seem to have found this error/bug anywhere and currently do not know what to do
<router-link to="/user/info" >
Information
</router-link>
<router-link to="/user/loan" >
Loans
</router-link>
<router-link to="/user/documents" >
Documents
</router-link>
If I click on Loans, it goes back to Information, if I click Documents, it goes back to Information
If I had to guess, it sounds like the issue might be with the routes you've setup and not with the links themselves.
I'd check them to see if the paths you define in the VueRouter match the ones used in your router-link elements. You can find more info about defining routes in the vue-router documentation.
Related
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.
There a re quite a few question with kind of a similar title to mine, but that is where my problem lies. Let's take a very common case where i'm building a recipe book.
i'm looping over my recipes and creating a link to the Recipe.vue component:
<router-link v-for="recipe in recipes" :to="{path: `/recipe/${recipe.title}`">
<a>{{recipe.id}}</a>
</router-link>
now from what i understand there are few solutions:
1. setting props:true and pass a prop:
<router-link v-for="recipe in recipes" :to="{name: 'Recipe', params: {recipe}}">
<a>{{recipe.title}}</a>
</router-link>
set Recipe as child component and pass the data as a regur parent=>child data transfer
use Vuex and state management to then "withdraw" the data from the store in the Recipe component
pass id to the Recipe component and then when its mounted() execute an http request to get the data of the specific item.
I'm finding it hard to understand what is considered best practice here and what should i choose for my production env.
the voice inside me says that number 3 - state management is an overkill and #4 is an unnecessary api call since i already have the data i need.
Any advice on which method should i use in the basic case of: first component is a list of recipes and then navigate from it to a component with single purpose of displaying the recipe data?
I'd like to my "SPA" refresh when I click a link, instead of its default behavior where you see the minimal component replacement.
It sounds like I'm killing the best part of SPA, but I feel that the links without refresh cause more troubles than benefits - the worst one I suppose is that the page doesn't apparently respond if you click a link to the current page, which is rather confusing in my opinion:
<!-- You click, then of course nothing happens when you're at HelloWorld -->
<router-link :to="{name: 'HelloWorld'}">link</router-link>
Okay, I didn't know that a normal <a> tag works as my expectation if history mode is used, so I ended up doing this:
<a :href="$router.resolve({name: 'HelloWorld'}).href">link</a>
or maybe just:
link
Thanks akai, I use your help in the case when I want to use the same component. I have a list of categories and when I click on a certain category page needs to be reloaded.
<a :href="$router.resolve({name:'category', params: {id: category.id}}).href">
{{category.name}}
<span>({{category.posts.length}})</span>
</a>
Faced such a problem - I send data to the props of the /router-link/ tag, when I click on the link, I go to the article, it gets the data, everything works. Well, if you press the "back" button in the browser and then "forward" there will be no articles, there will be empty fields without data. How can this be avoided?
This is link to the article
<h3 class="database-article__title">
<router-link
:to="{name : 'article',params: {
id: item.id ,
type:item.type ,
name: item.name,
text: item.text,
author: item.author,
isFavorite: item.isFavorite
}}"> {{item.name}} </router-link>
</h3>
Little part of article-template.vue
<div class="content-type marketing">
{{$route.params.type}}
</div>
<h3 class="database-article__title">
{{$route.params.name}}
</h3>
<div class="database-article__text">
{{$route.params.text}}
</div>
Once again, the data transfer is good, when you click on the link, everything is displayed. The problem is that when clicking on the buttons in the browser "back" and "forward" - the browser history is not saved.
Does anyone know the solution to the problem, or where i can read how to solve it?
Thanks!
My guess is that your article route does not specify any of those params in its path. When you click the link, vue-router will remember the params object you specified in the <router-link> and will be accessible through $route.params in the article component.
However, when you click the browser back then forward buttons, the transition to the article route did not occur by clicking the <router-link> like it did the first time, and since those params were not included in the route's path, $route.params will be empty.
I'm guessing you're just trying to pass data from one route to another. If you want it to persist across history state changes (i.e. browser back/forward), then either:
The data needs to be included in the URL, either as params (e.g. /article/:id/:type etc, this needs to be specified upfront in the route's path) or in the query string (e.g. /article?id=1&type=foo). This isn't ideal for this situation.
(Recommended) Store the item object in such a way that it can be accessed by any route. Vuex is one way, but this may be overkill.
Realistically your URLs should only need to have the article's ID in it, like this /article/1. All the other stuff like type/name/etc don't belong in the URL. From the ID you should be able to fetch the full article object either from a REST API (XHR request), or obtain it from some in-memory data store abstraction (Vuex or anything else really).
I need to get the router.name defined in the routes.
Code
<li repeat.for="row of router.navigation" data=${row.name}
</li>
The code above does not get the route name. I know all of the information I need is in the NavModel but I don't know how to access it in my above example using a for loop in the template
You're very close there. What you're looking for is:
${row.config.name}
You can see the full route meta-data available by logging it out to the console in the app.js view-model:
This is also useful for if you what to include anything from the route settings in your nav.