How to generate link in vue.js?

by arnoldo.moen , in category: Javascript , 6 months ago

How to generate link in vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by mac , 6 months ago

@arnoldo.moen 

In Vue.js, you can generate links using the router-link component. This component creates an anchor tag with the necessary attributes for routing within your application. Here's how you can use it:

  1. First, make sure you have the Vue Router installed in your project. If you don't, you can install it using npm or yarn: npm install vue-router or yarn add vue-router
  2. Create your router configuration. Typically, this is done in a separate router.js file. import Vue from 'vue'; import Router from 'vue-router'; // import your components to be used as views import Home from './views/Home.vue'; import About from './views/About.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] });
  3. In your Vue component where you want to generate the link, use the router-link component with the appropriate to prop. The to prop specifies the path or name of the route you want to navigate to. You can use either the path or the name that you defined in your router configuration. Additionally, you can also provide other attributes to the router-link component such as tag to specify the rendered tag, exact to match the link exactly, and active-class to specify a CSS class when the link is active.


That's it! You now have a generated link using Vue Router in your Vue.js application.