I must know if the navigation was triggered by JavaScript using
this.$router.push("...")
or clicked on a link like
<router-link :to="...">
How can I figure out this?
There is no difference between them because of <router-link :to="..."> will also resolve in this.$router.push("...").
To know the difference between them you can use query params like this.$router.push("link?clicked=F") and <router-link :to="link?clicked=T">. Using this query params you can easily distinguish between clicked and non clicked router link.
To access the query param use this.$route.query.<param-name> like this.$route.query.clicked will give T of F accordingly.
Related
I'm using Element Plus 2.2.28 and Vue.js 3.2.45.
I want to have a button like this:
<el-button>Contact</el-button>
When I click the button, I want it to behave like a link tag using mailto:someone#example.com.
I tried this:
<el-button href="mailto:someone#example.com">Contact</el-button>
However, this doesn't work.
I could use pure JS in the #click event of the button, but I understand this is not recommended.
Since you want to click on the button to redirect you, then you do not need any other functionality that the el-button offers. As such, you only want the appearance of an el-button. Therefore, you can use the el-button class instead on an anchor tag as follows;
<a class="el-button" href="mailto:someone#example.com">Contact</a>
I am trying to update a store value before the router kicks in an navigates to the desired route.
This is my current code which is not working:
<NuxtLink :to="`/posts/${post.slug}`" #click="setPost(post)">
{{ post.title.rendered }}
</NuxtLink>
If I manually trigger the mutation by adding a button like so:
<button #click="setPost(post)">{{ post.title.rendered }}</button>
and then hit the NuxtLink, everything works as expected, but obviously this isn't correct.
How do I ensure that a store mutation is executed before going to the /posts/ page?
Thank you.
A link should be a navigation, not doing something else if following the semantics of HTML.
You can then have some logic when leaving or entering specific pages thanks to Vue router guards: https://router.vuejs.org/guide/advanced/navigation-guards.html
If you want to trigger a vue action (recommended over a vue mutation as stated in the documentation), you can totally call setPost(post) via a button and then, do a $router.push('/posts ....') with your variables as shown in the documentation: https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort
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.
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>
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.