Question

有人能告诉我是否有办法直接在路径对象中访问路径参数？我需要根据路径对象要求不同的组件。

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')
      }
    }
  }
});

Answer 1

根据路由器配置中的路由参数，您不能要求一个或另一个组件。你可以做的是创建一个包装组件，它将使用一个或另一个组件，具体取决于路由参数，因为路由参数可以从任何组件访问。

正如vue-router documentation中所述：

路由对象将被注入启用vue-router的应用程序中的每个组件，如此。$ route，并且每当执行路由转换时都会更新。

您的每个组件都可以通过this.$route访问当前路线，因此您可以执行以下操作：

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

Answer 2

我还没有看到在路线对象中使用$route.params。您可以做什么，在您的vue中，您可以根据$route.params

动态加载不同的组件

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

在Vuejs

2 个答案: