关于嵌套路由用 props 传递 $route.params 的问题

来源：4-2 阅读器解析和渲染

慕工程9243709

2019-04-24

router.js 我是这样写的，在children里我设置了props: true

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/ebooks'
    },
    {
      path: '/ebooks',
      component: () => import('@/views/ebook/Index'),
      children: [
        {
          path: ':filename',
          component: EbookReader,
          props: true
        }
      ]
    }
  ]
})

然后在 EbookReader 里，我是这样写的

<template>
  <div class="ebook-reader">
    <h1>{{ filename }}</h1>
  </div>
</template>
<script>
export default {
  props: ['filename']
}
</script>
<style scoped></style>

如果不用嵌套路由的写法，这样是能获取 filename 的，
但是用嵌套路由的写法，我就只能通过$route.params.filename来获取，
这是什么原因呢？还是我哪里写错了吗？

写回答

2回答

慕工程9243709

提问者

2019-04-25

但是不放到嵌套路由children里也可以做动态路由啊，比如

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/ebooks'
    },
    {
      path: '/ebooks',
      component: () => import('@/views/ebook/Index'),
    },
    {
      path: '/ebooks/:filename',
      component: Ebook,
      props: true
    }
  ]
})

上面这样写的话，即是动态路由，也能通过 props 取到 filename，

不过我发现了一点区别，就是用非嵌套路由的时候，路由跳转后组件会覆盖整个页面，那么这样的话，之后课程里的BookTitle这种就没法实现，所以我感觉关于嵌套路由的使用和使用的正确姿势我并没有掌握，看官方文档也是不是很清晰，希望老师能给个指导