vue中路由嵌套的問題

初學VUE，好多地方不明白，如果問題實在小白，請大家見諒。

App.vue中的代碼
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

網站進入后會自動跳轉到路由

dashboard

中,
Dashbord的結構如下

路由代碼：

export default new Router({
  routes: [
    {
      path: '/',
      redirect: {
        name: 'Dashboard'
      }
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/article/:id',
      name: 'Article',
      component: Article,
      children:[
        {
          path: 'index',
          name: 'ArticleIndex',
          component: Article,
        }
      ]
    }
  ]
})

現(xiàn)在我的想法是，

在左右文章欄中點擊管理文章和添加文章后，會在Dashboard中紅框的地方顯示Article組件
但現(xiàn)在的問題是會直接打開新的頁面，直接顯示Article組件的內容。

這是為什么呀？