次回/前回のクリックイベントを伴うトリガービューアルーター/コンポーネント

Question

私はvue-cli、ルーターを使用しています。私は別々のコンポーネントを持っています。次の/前回のクリックイベントでページ間を切り替える最も良い方法は何ですか？ありがとうございました！ここで

// 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 }, 
    ] 

Answer 1

は、あなたがあなたのAppコンポーネント

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

    // Init currentRouteId from URL 
    this.refreshCurrentRouteId(this.$router.currentRoute.fullPath) 

    // Handle manual page change 
    this.$router.afterEach((to, from) => { this.refreshCurrentRouteId(to.path) }) 
    }, 
    methods: { 
    refreshCurrentRouteId (currentPath) { 
     this.currentRouteId = this.routes.findIndex(route => route.path === currentPath) 
    }, 
    next() { 
     console.log('Going to next page') 

     this.currentRouteId++ 
     if (this.routes.length === this.currentRouteId) { 
     // Go back to first route 
     this.currentRouteId = 0 
     } 

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

     this.currentRouteId-- 
     if (this.currentRouteId === -1) { 
     // Go to last route 
     this.currentRouteId += this.routes.length 
     } 

     this.$router.push(this.routes[this.currentRouteId]) 
    } 
    } 
} 

を定義することができますどのようにそれはrouter/index.jsファイル内で定義されたルートをナビゲートし、（router-linkかそこらを使用して）手動でのナビゲーションを処理しますです。