2016-09-28 222 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>