Ссылка маршрутизатора меняет путь, но вид маршрутизатора не меняется

Question

Итак, у меня есть боковая панель навигации и какая-то ссылка в ней.Точкой входа является домашняя страница.Проблема в том, что когда я пытаюсь изменить вид маршрутизатора с помощью ссылки на маршрутизатор на боковой панели навигации, вид маршрутизатора не меняется, но путь изменился.

Итак, вот мой маршрут намой router.js:

        {
        path: '/',
        component: Home,
        children: [
                {
                    path: ':name',
                    name: 'theTask',
                    props: true,
                    component: TodoList
                }
            ]
        }, 
    ],

А вот мой App.vue

<div class="container">
            <div class="main__content">
                <div class="sidenav">
                    <aside class="menu">
                        <ul class="menu-list">
                            <li><router-link :to="{ name: 'theTask', params: {name: 'today'} }">Today</router-link></li>
                            <li><router-link :to="{ name: 'home' }">Next 7 Days</router-link></li>
                        </ul>
                    </aside>
                </div>
                <div class="content">
                    <router-view></router-view>
                </div>
            </div>
     </div>  

Он отобразил домашнюю страницу, но когда я нажимаю ссылку маршрутизатора на дочерний маршрут, он нене меняйте вид маршрутизатора, только ссылку на маршрутизатор.

Answer 1

В этом случае вы должны указать пустой путь подчиненного маршрута. Я создал скрипку для того же здесь . Это согласно vue-router документации .

    { path: '/',
        component: Base,
      children: [{
        path: '',
        name: 'Home',
        component: Home
      },{
        path: ':name',
        name: 'theTask',
        props: true,
        component: Foo
      }]
    }
  ]
})

Answer 2

Реальный вопрос в том, что происходит под капюшоном.

rout.js

var routes = [{
    path: '/',
    name: 'home', // missed this one
    component: Home,
    children: [
        {
            path: ':name',
            name: 'theTask',
            props: true,
            component: TodoList
        }
    ]
}]

1. родитель - Home, а ребенок - TodoList маршрут для родителя /, а маршрут для ребенка /:name.Вы пытаетесь изменить представление истинным.и это меняется.Но вы не можете видеть это.потому что в родительском компоненте компонента, который вы пытаетесь изменить, нет router-view.

   По умолчанию родительский элемент равен App.vue для каждого объекта в массиве маршрутов (если вы не измените его иначе).Таким образом, Parent компонента Home является App.vue.Но родительский элемент TodoList является компонентом Home.Я уверен, что у вашего Home.vue нет <router-view>.Когда вы пытаетесь отобразить компонент TodoList, он отображает своего родителя, а затем находит <router-view> в своем родительском элементе и пытается отобразить себя там.Но нет.И даже если вы добавите <router-view> в Home.vue, вы получите рендеринг Home и TodoList.

2. Я предполагаю, что вы пытаетесь сделать эторендер Home и TodoList рендер отдельно на App.vue месте.Есть 2 варианта.

в routes.js файле добавьте 2 пути, один для /, а другой для /:name

var routes = [
{
    path: '/',
    name: 'home',
    component: Home,
},
{
    path: '/:name',
    name: 'theTask',
    props: true,
    component: TodoList
}];

имеет базовый компонент (если он вам действительно нужен)) и добавьте 2 детей.

var routes = [{
    path: '/',
    component: Base,
    children: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: ':name',
            name: 'theTask',
            props: true,
            component: TodoList
        }
    ]
}]

. Рассмотрите пример Evan You здесь

Answer 3

Я не уверен насчет варианта использования, но, скорее всего, вам не нужно использовать children в ваших маршрутах. Это предназначено для компонентов, которые живут на исходной странице как их родитель Если вам просто нужен другой компонент на другой странице, вы должны определить их как отдельные маршруты:

{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/:name',
  name: 'theTask', // although IMO this should be called something like "TodoList"
  component: TodoList
}

Затем вы можете использовать Vue Developer Tools (для Chrome), чтобы проверить и посмотреть, какой маршрут в данный момент отображается на вашей странице.