如何直接從組件中訪問Vue的路由數組？

Question

所以我試圖創建一個「上一頁」/「下一頁」類型的導航結構，它使用在我的index.js（路線）文件中定義路線的順序來確定下一個是哪一個。但是，我在理解如何訪問Routes數組時遇到了一些困難。 （具有諷刺意味的是，它位於Vue網站的路徑文檔 - 頁面底部的兩個小型<>箭頭）。

這是我的index.js文件：

import Vue from 'vue'; 
import Router from 'vue-router'; 
import Home from '@/components/home/Home'; 
import SearchResults from '@/components/search/SearchResults'; 
import Vision from '@/components/who-we-are/Vision'; 

Vue.use(Router); 

export default new Router({ 
    // mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     component: Home, 
    }, 
    { 
     path: '/search-results', 
     name: 'SearchResults', 
     component: SearchResults, 
    }, 
    { 
     path: '/who-we-are/vision', 
     name: 'Vision', 
     component: Vision, 
    }, 
    ], 
}); 

HTML：

<a @click="foo()">Next</a> 

腳本：

import Router from 'vue-router'; 

export default { 
    name: 'home', 
    methods: { 
    foo() { 
     console.log(this.Router.routes[0].path); 
    }, 
    }, 
}; 

上面的代碼，很顯然，沒有工作，但是這其中我已經離開了。

重申，基於上面的代碼，我試圖抓住路由數組，並創建一個簡單的導航，按照它們列出的順序（next/previous）移動它們。

僞代碼將類似於「點擊 - 去路由[0] .path，增加1」。 「如果再次點擊 - 去路由[1] .path，增加1。」等等（前面的內容相反）

Answer 1

您可以通過this.$router.options.routes從組件內訪問在Router構造函數中指定的routes數組。

但是，將此對象用於顯示和導航目的是一種完成簡單任務的完整方式。它會更容易添加路由名稱的順序您的組件組成的數組，你想瀏覽到他們：

data() { 
    return { 
    routeNames: ['Home', 'Search Results', 'Vision'], 
    } 
} 

然後創建要到根據當前的名字下一路線的方法路線：

methods: { 
    goToNextRoute() { 
    let index = this.routeNames.indexOf(this.$route.name); 

    if (this.routeNames[index + 1]) { 
     this.$router.push({ name: this.routeNames[index + 1] }); 
    } 
    } 
} 

---

如果你真的想爲你在Router定義他們使用的路線，我建議創建一個計算的屬性來跟蹤當前路線的索引。

要查找當前路徑的標識，你可以這樣做：

computed: { 
    routeIndex() { 
    let routes = this.$router.options.routes 
    let index; 
    for (let i = 0; i < routes.length; i++) { 
     if (routes[i].name == this.$route.name) { 
     index = i; 
     break; 
     } 
    } 

    return index; 
    } 
} 

然後，去下一個路由數組中：

methods: { 
    goToNextRoute() { 
    let nextRoute = this.$router.options.routes[this.routeIndex + 1]; 

    this.$router.push({ name: nextRoute.name }); 
    } 
} 

Answer 2

我想你應該看看這個例子。

import Vue from 'vue' 
import VueRouter from 'vue-router' 

// 1. Use plugin. 
// This installs <router-view> and <router-link>, 
// and injects $router and $route to all router-enabled child components 
Vue.use(VueRouter) 

// 2. Define route components 
const Home = { template: '<div>home</div>' } 
const Foo = { template: '<div>foo</div>' } 
const Bar = { template: '<div>bar</div>' } 

// 3. Create the router 
const router = new VueRouter({ 
    mode: 'history', 
    base: __dirname, 
    routes: [ 
    { path: '/', component: Home }, 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
    ] 
}) 

// 4. Create and mount root instance. 
// Make sure to inject the router. 
// Route components will be rendered inside <router-view>. 
new Vue({ 
    router, 
    template: ` 
    <div id="app"> 
     <h1>Basic</h1> 
     <ul> 
     <li><router-link to="/">/</router-link></li> 
     <li><router-link to="/foo">/foo</router-link></li> 
     <li><router-link to="/bar">/bar</router-link></li> 
     <router-link tag="li" to="/bar" :event="['mousedown', 'touchstart']"> 
      <a>/bar</a> 
     </router-link> 
     </ul> 
     <router-view class="view"></router-view> 
    </div> 
    ` 
}).$mount('#app') 

Answer 3

這似乎是你可以簡單地使用由vue-router提供的router.go(1)方法。此方法根據您傳入方法的數量在歷史堆棧中前移或後移。例如，前進1，你可以做router.go(1)，回去1你可以做router.go(-1)