vue on page link or anchor
To create a link or anchor in Vue, you can use the <router-link>
component provided by Vue Router. This component allows you to create links that navigate to different routes within your Vue application.
Here are the steps to create a link or anchor using <router-link>
:
Import the necessary components:
javascript import { createRouter, createWebHistory } from 'vue-router'; import { RouterLink } from 'vue-router';
Define your routes:
javascript const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, // other routes... ];
Create the router instance:
javascript const router = createRouter({ history: createWebHistory(), routes, });
Mount the router instance to your Vue app:
javascript const app = createApp(App); app.use(router); app.mount('#app');
Use
<router-link>
in your Vue template to create a link: ```htmlHome About
```
The to
attribute of <router-link>
specifies the destination route. You can use either a string path or a route object as the value.
That's it! You now have links or anchors in your Vue application using the <router-link>
component. When you click on these links, Vue Router will handle the navigation to the specified route.
Note: Make sure that you have Vue Router installed and properly configured in your Vue project before using <router-link>
.