2016-09-28 221 views
0

任何人都可以告訴我,如果有一種方法直接訪問路由對象內的路由參數,我需要根據路由對象需要不同的組件。Vuejs中的路由/子路由對象內的路由參數

router.map({ 
    '/dashboard/*': { 
    component: Home 
    }, 
    '/dashboard/:module': { 
    component: Module, 
    subRoutes: { 
     '/': { 
     component: require('./components/'+this.$route.params.module+'.vue') 
     }, 
     '/:tab': { 
     component: require('./components/'+this.$route.params.tab+'.vue') 
     } 
    } 
    } 
}); 

回答

3

你不能要求一個或依據路徑參數直接在路由器配置另一個組件加載不同的組件。你可以做的是創建一個包裝器組件,根據路由參數使用一個組件或另一個組件,因爲可以從任何組件訪問路由參數。

正如寫在vue-routerdocumentation

路由對象將被注入到在啓用VUE路由器,應用程序,因爲這$路線的所有組件,並且會更新每當執行路線過渡。

您的組件的每一個有機會獲得通過this.$route當前的路線,因此,你可以做這樣的事情:

<template> 
    <component-a v-if="$route.params.param1 === 'a'></component-a> 
    <component-b v-if="$route.params.param1 === 'b'></component-b> 
</template> 
+1

作爲jeerbl說,你應該在視圖查詢參數。不過,我建議你使用渲染功能,而不是模板 – Posva

+0

謝謝,我問,因爲我看到類似Voie路由器中的東西https://github.com/inca/voie-example/blob/master/spa/states /user/index.js – Ahmad

2

我還沒有看到在路由對象內部使用$route.params。什麼可以做,雖然在你的VUE您可以動態地根據你的$route.params

<component-a v-if="$route.params == 'a'"></component-a>