在 Vuejs 的路由/子路由对象中访问路由参数

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

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

动态加载不同的组件

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

Answer 2

您不能直接在路由器配置中根据路由参数要求一个或另一个组件。您可以做的是创建一个包装器组件，该组件将根据路由参数使用一个或另一个组件，因为可以从任何组件访问路由参数。

写在vue-router documentation:

The route object will be injected into every component in a vue-router-enabled app as this.$route, and will be updated whenever a route transition is performed.

您的每个组件都可以通过 this.$route 访问当前路由，因此您可以这样做：

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

在 Vuejs 的路由/子路由对象中访问路由参数

Access route params within route/ subRoutes object in Vuejs

vue.js

vue-router