Vue Routes URL: имя пользователя / имя_папки - PullRequest
Новая
       12

Vue Routes URL: имя пользователя / имя_папки

0 голосов
/ 03 октября 2018

Я создаю шаблон веб-сайта с фиктивными данными, используя vue & vuetify.У меня есть разные страницы, такие как:

  • localhost: 8080 / home
  • localhost: 8080 / exp
  • localhost: 8080 / skill *
  • localhost:8080 / about

Я хотел бы использовать этот шаблон для каждого пользователя и изменить структуру следующим образом:

  • localhost: 8080 / username /home
  • localhost: 8080 / имя пользователя / exp
  • localhost: 8080 / имя пользователя / skill *
  • localhost: 8080 / username / home

Я не знаю, является ли это наилучшей практикой, а также я не знаю, как это сделать.Не могли бы вы мне помочь ?Заранее спасибо.

Side Note: Я думаю, что я буду использовать firebase для хранения и получения пользовательских данных.Также я открыт для любых предложений.

Редактировать: Когда я иду localhost: 8080 / user / 1 Я могу видеть все в User.vue, однако, когда я иду localhost: 8080 / user/ 1 / home ничего не отображается.( localhost: 8080 / home работает. Я также вижу все внутри User.vue & Home.vue. 

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: '/home',
          name: 'home',
          component: Home
        },
        {
          path: '/exp',
          name: 'exp',
          component: Exp
        },
        {
          path: '/skills',
          name: 'skills',
          component: Skills
        },
        {
          path: '/about',
          name: 'about',
          component: About
        }
      ]
    }
  ]
})

User.Vue 

<template>
    <div>
        user
        <div>This is Bar {{ $route.params.id }}</div>
        {{personal.name}}
        <router-link :to="{ name: 'personal' }">Personal Info</router-link>
        <router-view></router-view>
    </div>
</template>

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Основная проблема заключалась в использовании « / home» в пути.Вот почему он идет localhost: 8080 / home вместо localhost: 8080 / user / 1 / home 

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'home',
          name: 'home',
          component: Home
        },
        {
          path: 'exp',
          name: 'exp',
          component: Exp
        },
        {
          path: 'skills',
          name: 'skills',
          component: Skills
        },
        {
          path: 'about',
          name: 'about',
          component: About
        }
      ]
    }
  ]
})

User.Vue 

<template>
    <div>
        user
        <div>This is Bar {{ $route.params.id }}</div>
        {{personal.name}}
        <router-link :to="{ name: 'personal' }">Personal Info</router-link>
        <router-view></router-view>
    </div>
</template>
0 голосов
/ 03 октября 2018

Это нужно сделать в роутере.как это: 

{
  path: 'username',
  meta: { label: 'Username'},
  component: {
    render (c) { return c('router-view') }
  },
  children: [
    {
      path: 'home',
      name: 'Home',
      component: Home
    },
    {
      path: 'exp',
      name: 'Exp',
      component: Cards
    },
    {
      path: 'about',
      name: 'About',
      component: About
    },
    {
      path: 'other',
      name: 'Other',
      component: Other
    }
  ]
}

Таким образом, вы добавляете childs к вашему пути ... это делает URL похожим на / username / exp

...