Понимание Vue маршрутизации - PullRequest
Новая
       3

Понимание Vue маршрутизации

0 голосов
/ 04 июля 2019

пытаюсь понять vue-router.Но пока я не смог получить то, что мне нужно.Проще говоря, когда я перехожу к example.com, он должен показывать компонент Home, а если я перехожу к example.com/:id, я хочу, чтобы компонент SavedComparator был загружен.Мой router.js выглядит следующим образом: 

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import SavedComparator from './views/SavedComparator.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: '/:id',
          component: SavedComparator
        }
      ]
    }
  ]
})

В моем App.vue у меня есть сегмент кода ниже: 

<v-content>
   <h2>params: {{ $route.params.id }}</h2>
   <router-view />
</v-content>

Но когда я перехожу к example.com/h8s7f, он всегда показываетHome компонент.Кроме того, $route.params.id в App.vue ничего не печатает.

Ответы [ 2 ]

2 голосов
/ 04 июля 2019

Проблема заключается в том, что вы ожидаете, что маршрутизатор будет вести себя так, как если бы он активировал режим истории

Либо включите режим истории: 

export default new Router({
  mode: "history",
  routes: [

Или получите доступ к URL-адресу как example.com/ # / h8s7f (с хешем перед маршрутом)

Вот пример: вы можете получить доступ к маршруту, добавив / + идентификатор https://codesandbox.io/s/vue-routing-example-33p1n?fontsize=14

0 голосов
/ 04 июля 2019

вам не нужно начинать свой маршрут с «/» в ваших вложенных маршрутах, потому что маршруты, начинающиеся с «/», будут считаться родительским маршрутом, попробуйте это в ваших дочерних элементах 

 {
      path: 'comparator/:id', 
      component: SavedComparator
 }

, а затем пример.com / компаратор / id направит вас на правильный компонент

...