Vue Js Button Link to Another Page:In Vue.js, you can use the built-in router to create button links to other pages in your application. First, you need to define your routes in the router configuration. Then, in your component, you can use the <router-link> component to create a clickable link. You can customize the link’s appearance by adding CSS classes or styles.

How can I create a button in Vue js that redirects to another page when clicked?

This is a Vue.js code snippet that demonstrates how to use the Vue Router to create navigation links between pages in a single-page application (SPA).

The router-link component is used to create clickable links that navigate the user to different pages of the SPA based on the specified to property. Each router-link corresponds to a route in the routes array defined in the script.

The router-view component is used to render the appropriate component for the current route, based on the path property of each route.

The const statements define three different components, each with its own template that defines the content to be displayed on that component’s corresponding page.

The routes array defines the routes for the SPA, including the path and the component to be rendered for each route.

The VueRouter.createRouter function creates a new router instance, passing in the routes array and the history object that specifies the router mode.

Vue Js Button Link to Another Page Example

<div id="app">
   <div>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/courses">Courses</router-link>
   </div>
   <router-view></router-view>
</div>
    <script type="module">
        const Home = { template: '<div>This is Home Page</div>' }
        const About = { template: '<div>This is About Page</div>' }
        const Courses = { template: '<div>This is Courses Page</div>' }
        const routes = [
            { path: '/', component: Home },
            { path: '/about', component: About },
            { path: '/courses', component: Courses }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        const app = Vue.createApp({})
        app.use(router)
        app.mount('#app')
    </script>

Output of Vue Js Button Link to Another Page