Question

我的路由器当前看起来像：

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '',
            name: 'home',
            component: Home
        },
        {
            path: '/:set',
            name: 'set',
            component: Set
        },
    ]
})

我希望它看起来像这样：

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '',
            name: 'home',
            component: Set,
            set: 'set-value-here'
        },
        {
            path: '/:set',
            name: 'set',
            component: Set
        },
    ]
})

更改是URL路径仍为”，但我希望它使用编码为set的变量来加载 Set 组件。

这可能吗？

Answer 1

据我所知这是不可能的。但是您可以做其他事情。您可以将参数传递给Home Component，然后根据参数的值调用不同的组件。

编辑1：

我猜是这样的：

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/:set?',
            name: 'home',
            component: Home
        },
    ]
})

在Home组件中，您可以使用以下代码：

<template>
    <div>
        <div v-if="set === null">
            // Continue Home Component
        </div>
        <div v-else>
            <set-component></set-component>
        </div
    </div>
</template>

and etc...

Answer 2

您尝试使用meta字段吗？

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '',
            name: 'home',
            component: Set,
            meta: {
              set: "set-value-here"
            }
        },
        {
            path: '/:set',
            name: 'set',
            component: Set
        },
    ]
})

您可以在呈现组件时访问它

mounted() {
  console.log(this.$route.meta.set);
},

您可以使用元字段传递默认值。

Route Meta Fields

将我的家庭路线传递给VueJS中的默认值

2 个答案: