Activate Vue router/component by clicking next/previous event

Question

Activate Vue router/component by clicking next/previous event

I am currently using a vue-cli and router in my development project. I have multiple components and I need to find the best way to switch from one page to another when a user clicks on the next/previous button. Any suggestions would be greatly appreciated! Thank you!

   // App.vue
   <nav>
      <router-link to="/">Homepage</router-link>
      <router-link to="/link_1">About</router-link>
      <router-link to="/link_2">Portfolio</router-link>
      <router-link to="/link_3">Contact</router-link>
    </nav>

    <div @click="next">Go to next link</div>
    <div @click="preview">Go to previous link</div>

   // router/index.js
   const routes = [
     { path: '/', component: home },
     { path: '/link_1', component: About },
     { path: '/link_2', component: Portfolio },
     { path: '/link_3', component: Contact },
   ]

javascript vue.js

Answer 1

Answer №1

If you want to create your own App component, here's an example of how you could do it:

export default {
  name: 'app',
  data () {
    return {
      pages: [],
      currentPageId: 0
    }
  },
  mounted () {
    this.pages = this.$router.options.routes

    // Set initial currentPageId based on URL
    this.setInitialPage(this.$router.currentRoute.fullPath)

    // Handle manual page changes
    this.$router.afterEach((to, from) => { this.setInitialPage(to.path) })
  },
  methods: {
    setInitialPage (currentPath) {
      this.currentPageId = this.pages.findIndex(page => page.path === currentPath)
    },
    next () {
      console.log('Moving to the next page')

      this.currentPageId++
      if (this.pages.length === this.currentPageId) {
        // Go back to the first page
        this.currentPageId = 0
      }

      this.$router.push(this.pages[this.currentPageId])
    },
    preview () {
      console.log('Going to the previous page')

      this.currentPageId--
      if (this.currentPageId === -1) {
        // Go to the last page
        this.currentPageId += this.pages.length
      }

      this.$router.push(this.pages[this.currentPageId])
    }
  }
}

This component will navigate through the routes defined in the router/index.js file and can handle manual navigation as well, such as using router-link.

Answer 2

If you want to create your own App component, here's an example of how you could do it:

export default {
  name: 'app',
  data () {
    return {
      pages: [],
      currentPageId: 0
    }
  },
  mounted () {
    this.pages = this.$router.options.routes

    // Set initial currentPageId based on URL
    this.setInitialPage(this.$router.currentRoute.fullPath)

    // Handle manual page changes
    this.$router.afterEach((to, from) => { this.setInitialPage(to.path) })
  },
  methods: {
    setInitialPage (currentPath) {
      this.currentPageId = this.pages.findIndex(page => page.path === currentPath)
    },
    next () {
      console.log('Moving to the next page')

      this.currentPageId++
      if (this.pages.length === this.currentPageId) {
        // Go back to the first page
        this.currentPageId = 0
      }

      this.$router.push(this.pages[this.currentPageId])
    },
    preview () {
      console.log('Going to the previous page')

      this.currentPageId--
      if (this.currentPageId === -1) {
        // Go to the last page
        this.currentPageId += this.pages.length
      }

      this.$router.push(this.pages[this.currentPageId])
    }
  }
}

This component will navigate through the routes defined in the router/index.js file and can handle manual navigation as well, such as using router-link.

Activate Vue router/component by clicking next/previous event

Answer №1

Similar questions

The span's onclick function seems to be malfunctioning

The select menu default value is not displaying properly after the update to select2 version 4.0.3

Guide to incorporating an input field within a select option in ant design and react

Continuous Advancement Meter

The error message "THREE is not defined" indicates a problem

How to create an array of objects in TypeScript

Incorporate a dynamic animation feature into the Morris Chart

Giving ng-click the current HTMLElement

Is there a way to modify a document without altering its original location?

What is the best way to retrieve error messages from a transaction with ethers.js?

Tips for updating the server without having to reload the page using vuejs

Change the behavior of JavaScript so that it executes when clicked, not when the

Discontinuing the fieldset tab interface feature from a Dexterity content type

Utilizing AJAX to load a WAV file

Nested Add and Remove using Jquery

What is the best way to pass a value to a modal and access it within the modal's component in Angular 8?

Is there a way to disable text selection in AngularJS when double-clicking using ng-dblclick?

Implement a T3 App Redirect in a TRPC middleware for unsigned users

Access Mixins Throughout Your Entire Vue 3 Application

Get to a certain nested div by using jQuery