vue中路由嵌套的问题

Question

初学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,
        }
      ]
    }
  ]
})

现在我的想法是，

在左右文章栏中点击管理文章和添加文章后，会在Dashboard中红框的地方显示Article组件
但现在的问题是会直接打开新的页面，直接显示Article组件的内容。

这是为什么呀？

Answer 1

你那个侧边栏应该是放在一级路由下面,也就是将article作为dashboard子路由应该就可以实现你的需求