Передача моего домашнего маршрута по умолчанию в VueJS - PullRequest
Новая
       14

Передача моего домашнего маршрута по умолчанию в VueJS

1 голос
/ 21 апреля 2019

Мой маршрутизатор в настоящее время выглядит следующим образом: 

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.

Возможно ли это?

Ответы [ 2 ]

1 голос
/ 21 апреля 2019

Вы пробовали мета-поля? 

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

Вы можете передавать значения по умолчанию, используя мета-поля.

Мета-поля маршрута

1 голос
/ 21 апреля 2019

Это невозможно, насколько я знаю. Но вы можете сделать что-то еще. Вы можете передать свой параметр своему домашнему компоненту, а затем, основываясь на значении вашего параметра, вы можете вызвать различные компоненты.

Редактировать 1:

Примерно так: 

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

И в вашем домашнем компоненте вы можете использовать это: 

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

and etc...
...