I'm using vue-router with vuejs2.
This way I'm doing a link to a route called "ClientS"
<router-link :to="{name : 'clients'}">Link to CLIENTS</router-link>
and it gives:
<a class="router-link-exact-active router-link-active">... </a>
However I want that when another route is called, let's say CLIENT (singular), the route 'clients' also gets the class router-link-active. How to do that ?
Related
I have a prop that's supposed to pass "careers/whatever-entry-here", and I'm trying to use router-link to set it up.
<router-link v-if="!buttonLink" :to="buttonEntry" exact class="bunch-of-classes-here">
Click Here
</router-link>
I am expecting the link to render as "http://localhost:3000/careers/whatever-entry-here" - but instead I get "http://localhost:3000/whatever-entry-here".
I have looked everywhere but I can't seem to get it to pass the folder to the URI.
When I output {{ buttonEntry }} somewhere else in the template, it outputs it "careers/whatever-entry-here"
Any suggestions?
Ahh. Requires a '/' before the URI, which the API wasn't returning.
Solved by changing the code to:
<router-link v-if="!buttonLink" :to="`/`+buttonEntry" exact class="bunch-of-classes-here">
Click Here
</router-link>
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
<ul v-for="(item, index) in someList" :key="index">
<li :class="{'some-class': a_computed_property === item.someData}">
xxx
</li>
</ul>
computed: {
a_computed_property {
console.log('computed!!!')
return '123'
}
}
Here is my code and "someList" is an array with three items. I found that when I refresh the page, "computed!!!" got printed triple times on server side (and once on client side), which I think is not necessary because I think this computed property should be cached and "computed!!!" should only be printed once on server side. So why does this repeated computing happen and is there any way to avoid this?
Because during server side rendering (SSR), computed properties are not reactive and for that reason not caching returned values.
Check this Vue issue for details...
Only way around it is to completely disable server side rendering for the component using <client-only> Nuxt component
I have set up very basic routing on a Vue project using vue-router.
The router-link-active classname gets applied as expected to the active root. In the following gif, that would be 'Foo' when /foo is active, etc.
However, the link to 'Hello world' also has the router-link-active classname.
Why does it get applied and how can I ensure it's only active when I am on / (localhost:8080)?
Put exact prop to your "/" route
The default active class matching behavior is inclusive match. For
example, will get this class applied as long as
the current path starts with /a.
One consequence of this is that will be active
for every route! To force the link into "exact match mode", use the
exact prop:
<!-- this link will only be active at / -->
<router-link to="/" exact>
Here is what you need: jsFiddle
I'm using Vue.js 2 and I'm trying to create a link that should send me to another page. This is what I have:
<div v-for="u in myList">
<router-link :to="'/type/' + u.name"><a>{{u.name}}</a></router-link>
</div>
The above piece of code works but now I would like to pass a parameter (u.weight for example ) along with this link.
I took a look at query parameters but I don't want the user to see this in the address bar type/productname/?queryparamshere.
Is there a way to hide query params, or should I consider another way in order to achieve this?