How to create a vuesax router link? Any answer would be appreciated.
What I tried: Adding to="/path" to vuesax-navbar__item, but it does not trigger class change.
From this documentation, it describes the router support for the button.
You can send a string or object to directive to. This directive wrap a $router.push() vue method, you can use all programmatic navigation on vue router.
String literal Object Path Named Router With Query
<vs-button color="primary" type="filled" to="/components/list.html">String literal</vs-button>
<vs-button color="warning" type="filled" :to="{ path: '/components/list.html' }">Object Path</vs-button>
<vs-button color="success" type="filled" :to="{ name: 'user', params: { userId: 123 } }">Named Router</vs-button>
<vs-button color="dark" type="filled" :to="{ path: 'register', query: { plan: 'private' } }">With Query</vs-button>
Related
This is how the route is used in template Component.vue:
<router-link :to="{ name: 'club' }">
<lazy-image
src="club.jpg"
class="club_class"
alt="Club alt"
/>
</router-link>
And this is how it's defined in router.js:
const routes = [
{
path: '/s/site',
name: 'club',
component: () => import('./_pages/Club'),
},
];
export default routes;
I need to add a just a static parameter to the link like this:
'?foo=bar'
I tried to hardcode that in Component.vue but it didn't work. Shoud I define it in router.js as param or somewhere else?
Use this code:
<router-link :to="{name: 'club', query: {param1: 'value1', param2: 'value2'}}">go</router-link>
I am trying to use <b-nav-item> tags as router links but the active link class only updates one time – I can load the page and click on a nav item and the class changes appropriately. But clicking again does not.
I have tried various syntax for the link attributes including:
to="dashboard"
to="/dashboard"
:to="{ name: 'Dashboard' }"
:to="{ path: '/dashboard' }"
I've also tried adding the exact attribute tag. Nothing is working and I feel like I'm running in circles here. Any ideas?
CompanionNavigation:
<template>
<div>
<b-nav pills>
<b-nav-item :to="{ name: 'Dashboard'}" exact>Dashboard</b-nav-item>
<b-nav-item :to="{ name: 'Contacts' }" exact>Contacts</b-nav-item>
</b-nav>
</div>
</template>
Routes:
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
},
{
path: '/contacts',
name: 'Contacts',
component: Contacts,
},
This was resolved by removing the following from my main template file:
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
I'm trying to develop a simple website using vue js and so far it goes well but I'm facing the following Issue:
I'm using a router to change pages, it works, but what I need to do is: Change Page & scroll to a specific anchor.
What I tried already:
Works well:
Route to contact page or home
<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>
Doesn't work:
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
The last one works only if I'm on the home page, but whenever I change to Contact Page and try to route to "/#technology" it won't work. It does try routing to "http://example.com/contact/#technology" instead of "http://example.com/#technology".
If I do it like that, it will just scroll to top, but not to the anchor:
<router-link to="/#technology" Technology</router-link>
My Router Code:
const routes = [
{ path: '/', component: Home },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { selector: to.hash };
}
return { x: 0, y: 0 }
},
});
new Vue({
router,
}).$mount('#app');
And the templates look like this ( I did remove the unnecessary code):
<template id="home">
<div>
Home
<div id="technology"> <!-- IT SHOULD SCROLL TO HERE -->
</div>
</template>
<template id="contact">
<div>
Contact Page
</div>
</template>
i think you are on the right path.
but maybe you have mistaken the usage of Route name and path.
instead of
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
try using path instead of name
<router-link :to="{ path: '/', hash: '#technology' }" >Technology</router-link>
I can't seem to find a good way to disable a nuxt-link based on a data variable. Could anyone suggest something? I've tried looking at doucmentation but I can't come up with anything.
Say I have a boolean called disable I want to do something like this
<nuxt-link :disabled="disable"></nuxt-link>
I basically just don't want the link to be clickable if the boolean is set to false
<nuxt-link> is essentially <router-link> of Vue Router.
You can disable it using the event prop.
Assuming your one of your data or computed property is disabled boolean:
<nuxt-link :event="disabled ? '' : 'click'"></nuxt-link>
Working example:
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '/baz', component: Baz }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
data(){
return {
disabled: true
}
}
}).$mount('#app')
<script src="https://unpkg.com/vue#2.7.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router#3.6.5/dist/vue-router.min.js"></script>
<div id="app">
<h1>Hello App!</h1>
<div>
<!-- Assume they are <nuxt-link> because they are the same -->
<router-link
:event="disabled ? '' : 'click'"
to="/foo"
>
Go to Foo ({{ disabled ? 'Disabled' : 'Enabled' }})
</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/baz">Go to Baz</router-link>
</div><br />
<button #click="disabled = !disabled">Toggle Foo availability</button><br /><br />
<router-view></router-view>
</div>
I found that the most simple way was to just create a class for the disabled links. I'm still not sure if this is the best way to do it but it works for me and does exactly what I want.
<nuxt-link to="/search" :class="{ disabled: disabled }"> Search </nuxt-link>
my css
.disabled {
color: lightgrey
pointer-events: none
}
Another way to do this, which I'd like the most. Is to change the tag to the button and use the native :disabled state.
<nuxt-link tag="button" :disabled="disabled" to="/some/location">Some location</nuxt-link>
Then just turn the button into the link with the help of styles.
In Nuxt3 this works for me: :to="canNavigate ? link : null"
In Vue Router 4, router-link do not support tag and event props anymore. Here you can have more information.
I'll copy the example from the link above here:
replace
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
with
<router-link to="/about" custom v-slot="{ navigate }">
<span #click="navigate" #keypress.enter="navigate" role="link">About Us</span>
</router-link>
And I'll give a real example of usage. This piece of code I'm using in a real project, using nuxt and tailwind.
<nuxt-link
v-slot="{ navigate }"
class="flex-grow font-ember"
:to="`lesson/${l.lesson_id}`"
append
custom
>
<button
class="flex items-center"
:class="{
'text-gray-400 cursor-not-allowed': !l.released,
'text-gray-900': l.released,
}"
:disabled="!l.released"
#click="navigate"
>
...
</button>
</nuxt-link>
Just add the event prop if you simply want to disable a nuxt-link
<nuxt-link event="">Go to Foo</nuxt-link>
For this case anyway you can click on it. It displaying disabled but still clickable.
You need to use attribute tag in you nuxt-link
Example here <nuxt-link tag="button" :disabled="disable"></nuxt-link>
None of these seemed to work for me, so I set the :to on the nuxt-link to a computed method. The to attribute on nuxt link will redirect nowhere when empty. For example:
<script>
export default{
computed: {
redirectRequest(){
return this.isMobile ? "" : "/Worklog";
}
}
}
</script>
<template>
<NuxtLink :to="redirectRequest"></NuxtLink>
</template>
I am trying to build a spa using vuejs in which I have a list of users now when I click a user it should route to a new page with user details of the particular user how to params the user id in router-link
You can pass params in router link using
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Here "name" key parameter defines the name of the route and "params" key defines the parameters you need to send with that route.
If you need to use Route Path instead of Route name, You can use.
<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>
Reference
Looks like params: {...} doesn't work on non-named routes so to get that working I had to make my links like this:
<router-link :to="'/view-customer/' + customer.ID">
With ES6 template literals:
<router-link :to="`/books/${book.id}`"></router-link>
solution for non-named routes:
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
>Register</router-link>
resulting in /register?plan=private
source: Documentation
I'm using this and it's works fine:
<router-link :to="'/home?id=' + customer.ID">
Also use the following code to retrieve it:
this.$route.query.id
router/index.js:
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Item from '../views/Item.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'List',
component: List
},
{
path: '/item/:id',
name: 'Item',
component: Item
}
}
]
List.vue:
<router-link :to="{ name: 'Item', params: { id: data.item.id }}">{{ data.item.id }}</router-link>
Item.vue:
<template>
id: {{ $route.params.id }}
</template>
<script>
return this.$route.params.id
</script>
Routes declaration
{path: '/insta-view/:name', name: 'instaFrontView', component: instaFrontViewComponent},
Bind parameter using the path
<router-link :to="'insta-view/'+ loginUserName" class="nav-link"> View</router-link>
Bind parameter using the name
<router-link :to="{ name: 'instaFrontView', params: { name: loginUserName }}" class="nav-link"> View</router-link>
export default {
data() {
return {
loginUserName: 'test',
}
},
}
Retrieve parameter in code
this.$route.params.name