I can link like this in vue.js 2.0:
<router-link to="home">Home</router-link>
This compiles to an a tag. But how do I do this with a div?
With vue.js 1.0 I did it like this:
<div v-link="{ name: 'Messages', params: { topic: topic.slug }}">test</div>
That's obviously not working anymore.
Well, router-link has a tag prop. You're looking for this:
<router-link to="home" tag="div">Home</router-link>
The Vue Way
If you want <router-link> to render as another tag, in your case div, you can use tag prop to specify which tag to render to, and it will still listen to click events for navigation.
<router-link to="home" tag="div">Home</router-link>
You can also do this via one of pure HTML ways:
Way 1
<a href="/home">
<div>
Home
</div>
</a>
Way 2
<div style="cursor: pointer;" onclick="window.location='/home';">
Home
</div>
You can also modify second way in vue way as following:
<div style="cursor: pointer;" #click="redirectToHome">
Home
</div>
where you can define redirectToHome method as following:
methods: {
redirectToHome () {
this.$router.push(
{
path: '/home',
}
)
},
Vue.js 3
Disclaimer: the question is about Vue.js 2. I saw that.
tag attribute is no more
Instead, do a v-slot such as:
<router-link to="/about" custom v-slot="{ navigate }">
<div role="link" #click="navigate">test</div>
</router-link>
custom prevents the creation of an a element
navigate is the function provided for the div, to activate navigation
role="link" is accessibility stuff (you could omit it), but can also be used for CSS'ing the hand mouse cursor
CSS:
[role="link"]:hover {
cursor: pointer;
}
One could also just let the a remain, since browsers are now better at dealing with a display:block a, but that's another story.
Related
I dynamically created sidebar navigation list using router-link.
<template>
<div class="sidebarListItem bg-light">
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
class="list-group-item list-group-item-action bg-light">
{{route.title}}
</router-link>
</div>
</template>
<script>
export default {
name: "PageSidebarList",
computed: {
routes(){
return this.$router.options.routes
}
},
}
</script>
Each router-link is one map.
But then, I need to use <router-link> in some other place in my app, so I need to register new view (map) in router.js. The problem is I don't want this one view to be in sidebar list and it is automatically because of my code. I tried to separate routes in different files(one that I need for list and the rest of the views) and then importem them in router.js. but still it does't work. Or I don't know how to call them separatelly. I am new to vue and vue-router so please help. Is it possible to do what I want?
It's possible to add custom meta data to each route:
{
path: '/foo',
component: Foo,
meta: { hideInNav: true }
}
And then you can use a v-if on the router-link v-if="!route.meta.hideInNav"
Basically I'm trying to remake some simple web page that I have initially created with HTML and CSS to be working rather on React. I managed to redo the page to correctly display when it was moved into React, however I don't really understand why the navigation links that I have on top do not take me to the corresponding section on the same page anymore as well as why the external links to the project sites also stopped working.
Here is the project link code:
import React from "react";
export default function ProjectTile(props) {
return (
<div className="project-tile" id={props.id}>
<a href={props.href} target="_blank" id={props.link_id}>
<img
className="project_screenshot"
src={props.img_src}
alt={props.img_alt}
/>
<p className="project_name">
<span className="brackets"><</span> {props.title}{" "}
<span className="brackets">/></span>
</p>
</a>
</div>
);
}
All props are getting mapped and loaded from the array with corresponding data where each object looks like this:
{
id: "tribute_page",
link_id: "https://codepen.io/konstantinkrumin/full/PooYQbG",
img_src: "https://i.imgur.com/ynRuzOQ.png",
img_alt: "tribute_page_screenshot",
title: "Tribute Page"
}
The navigation links used are the following:
import React from "react";
export default function Navbar() {
return (
<nav id="navbar">
<a className="nav-link" href="#welcome-section">
About
</a>
<a className="nav-link" href="#projects">
Projects
</a>
<a className="nav-link" href="#contact">
Contact
</a>
</nav>
);
}
And each section they refer to have an id corresponding to the href indicated above.
Here if the link to this project on codesandbox
P.S. Everything used to work correctly when it was on HTML.
Also the contact links that seem to be set in similar way as project links are working.
Here are two things I think I found out:
In the ProjectTile.js file, replace href = {props.href} by href={props.link_id and now project opens in codepen.
About the jump link you have made in nav-bar, I think it's because of problem of codesandbox.
If you manage to make your url to https://op6gq.csb.app#projects instead of https://op6gq.csb.app/#projects. That's gonna work.
Or directly visiting https://op6gq.csb.app/#welcome-section jump link too works well.
It looks like there's no href prop. Sounds like what you want is something like
href={`#${props.id}`}
which would evaluate to href="#tribute_page" in this example.
You Have to try that your page url become:
https://op6gq.csb.app#welcome-section
Not:
https://op6gq.csb.app/#welcome-section
please attend to that / in address bar!
I'm trying to make a login button as a single-file-component in Vue.js (it's a Rails app with a Vue.js front-end). If you click this button, it's supposed to take you to the an external provider's login page.
How can I use an image as a button? I'm guessing you use v-on:click for the actual redirect, but I'm stuck there.
Right now, this code below shows a hardcoded button that looks like img(src="../assets/img/login_button.png"). You can click on it, but that's obviously not what I want. I want to show the actual png image, not the path.
// LoginButton.vue
<template lang="pug">
#login-button
<button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
#Component
export default class LoginButton extends Vue{
redirect_to_login():void{ // I haven't written this method yet
}
}
</script>
Is there any reason you can't just use normal HTML image inside your button? I haven't used pug before.
<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button
Though since you're using Vue and not an actual HTML form you might not even need a button you could just add the click binding to the image instead
<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />
I am not familiar with pug, so I don't know what the correct syntax you'll need is. But you can use the <router-link> tag to set the route. For example (using Vuetify)
<router-link to="/">
<v-img src="/path/to/img.gif"/>
</router-link>
Either you can use:
<a #click="Redirect">
<img src='IMAGE_SRC' />
</a>
or
<img #click="Redirect" src='IMAGE_SRC'/>
new Vue({
el: '#app',
methods:
{
Redirect()
{
window.location.href = "https://jsfiddle.net/";
//or
//this.$router.push('LINK_HERE'); // if ur using router
}
}
})
Demo LINK:
https://jsfiddle.net/snxohqa3/5/
EDIT: I forgot to clarify, what I'm looking for is to know how to write an anchor tag with the href attribute present but that when the element is clicked, the href should be ignored and the click handler should be executed.
I'm currently using Vue 1 and my code looks like:
<div v-if="!hasPage(category.code)">
<div>
<template v-for="subcategoryList in subcategoryLists[$index]" >
<ul>
<li v-for="subcategory in subcategoryList"v-on:click.stop="test()">
<a :href="subcategory.url">{{subcategory.label}}</a>
</li>
</ul>
</template>
</div>
</div>
What i'm trying to do is present the user with some buttons that represent my site's categories, some of this buttons will lead the user to another page and other will toggle a dropdown with a list of subcategories, when clicking these subcategories you will be taken to the subcategory's page.
These would be pretty simple but these buttons need to be tracked by Google Tag Manager so that's why I used the #click attribute to call a function and ignore the href attribute. This doesn't work, I have tried #click.prevent, #click.stop, #click.stop.prevent and none of these work.
The thing is that if I remove the href attribute, the #click method works great but an SEO requirement is to have href attributes on every link.
Any help would be appreciated.
As #dan-oswalt specified in the comments, you have to add the click event on the same element as the href. The reason it did not work the time you tried is most likely because you tried with #click.stop which only stops propagation, not the default action. (Redirect to the link). What you want is to prevent the browser to redirect the user: #click.prevent
new Vue({
el: '#app',
data: {
subcategoryList: Array(10).fill({
url: 'http://google.com',
label: 'http://google.com'
})
},
methods: {
test(event) {
event.target.style.color = "salmon"
}
}
})
Vue.config.devtools = false
Vue.config.productionTip = false
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<main id="app">
<template>
<ul>
<li v-for="subcategory in subcategoryList">
<a :href="subcategory.url" v-on:click.prevent="test($event)">{{subcategory.label}}</a>
</li>
</ul>
</template>
</main>
Im looking to run a function that corresponds with each router link with that has the default class 'router-link-active'.
For simplicity I would like to replicate basic CSS class/style change for each active link using Javascript or Vue.js Directives.
CODEPEN
<router-link to="/1" class="link ROUTER-LINK-ACTIVE">one
<span style="change this within function when active"></span>
</router-link>
thank you for any insight )