如何获取组件取决于 vue 路由器参数？

Posted 2023-02-23

【中文标题】如何获取组件取决于 vue 路由器参数？

【英文标题】：How can I get component depends on vue router param?

【发布时间】：2019-01-10 14:06:54

【问题描述】：

我有一个组件Portfolio.vue，它有一个子组件Category.vue，我可以通过<router-link :to = " name: 'category', params: id: id "> 获得。 Category.vue 从路由器接收参数id。 在Category.vue 我想导入许多组件之一。例如，如果id 即Category.vue 来自Portfolio.vue = 'google'，那么我有id = 'google'，我想在Category.vue 中导入组件google.vue 并在那里渲染它。

这是我的Portfolio.vuesn-p

<template>
    <div class = "categories">
                        <div
                                class = "category"
                                v-for = "(category, index) in categories"
                                :key = "index"
                        >
                            <div class = "category-title">category.name</div>
                            <div class = "category-description">category.description</div>
                            <div class = "category-portfolios">
                                <div
                                        class = "category-portfolio"
                                        v-for = "(portfolio, index) in category.portfolios"
                                        :key = "index"
                                >
                                    <router-link :to = " name: 'category', params:  slug: portfolio.slug ">
                                        portfolio.slug
                                    </router-link>

                                </div>
                            </div>
                        </div>
                    </div>
</template>

<script>
    export default 
        name: "portfolio",
        data() 
            return 
                pageName: 'Portfolio',
                categories: []
            
        ,
        mounted() 
            fetch('api/portfolio/index')
                .then(response => response.json())
                .then(json => this.categories = Object.assign(, json.categories))

                .catch(error => 
                    console.log(error);
                )

        
    
</script>

<style lang = "scss" scoped>

</style>

这是我的Category.vue

    <template>
        <div>
            slug
            <component
                    :is="currentTabComponent"
                    class="test"
            ></component> <!--this component should be rendered-->
        </div>
    </template>

    <script>
    // import this.$route.params.slug   from './components/portfolios/this.$route.params.slug' 
//this code is wrong, but the main idea is to import component

        export default 
            name: "category",
            data() 
                return 
                    slug: ''
                
            ,
            beforeCreate() 
                this.slug = this.$route.params.slug;
            ,
            computed: 
                // maybe here I should definded what component should I render. This was in example in Vue documentation
                currentTabComponent: function () 
                    return this.slug
                
            ,

        
    </script>

    <style scoped>

    </style>

还有我的google.vue 组件

<template>
    <div>
        <h1>This is google portfolio</h1>
    </div>
</template>

<script>
    export default 
        name: "google"
    
</script>

<style scoped>

</style>

我读了这个Load component/template depending on the route param vuejs，看了这个https://jsfiddle.net/wostex/yLu0uza8/2/和这个https://vuejs.org/v2/guide/components.html#Dynamic-Components，但我仍然不知道如何从文件夹/文件中导入特定的.vue组件，我如何声明这个特定的@987654343 @ 父组件中的组件 (Category.vue) 以及最后如何在父组件中呈现这个特定的 .vue 组件 (Category.vue) <template></template>。

所以主要问题是如何通过路由器参数从组件数量中导入特定组件？ 谢谢。

【参考方案1】：

难道你不能让组件本身根据路由 ID 动态更改其内容吗？

【讨论】：

我该怎么做？内容应该在哪里？

而且每个子组件内部都会有很多静态html，而且设计不同

@YaroslavSaenko 很难说除了你的组件名称之外我没有任何代码或任何东西......

【参考方案2】：

您可以使用dynamic components 并将id 参数as props 传递给您的路线。 类似的东西：

const Category = Vue.component('category', 
  name: 'category',
  template: '#category',
  props: ['id']
);

const router = new VueRouter(
  routes: [
     path: '/category/:id', name: 'category', component: Category, props: true ,
  ]
)

在模板中：

<template id="category">
  <div>
    <h3>Category :  id </h3>
    <component :is="id"></component>
  </div>
</template>

fiddle example