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

Question

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来获取，
这是什么原因呢？还是我哪里写错了吗？

Answer 1

提问者 慕工程9243709 2019-04-25 14:57:43

但是不放到嵌套路由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这种就没法实现，所以我感觉关于嵌套路由的使用和使用的正确姿势我并没有掌握，看官方文档也是不是很清晰，希望老师能给个指导

Answer 2

Sam 2019-04-24 23:42:12

你好，:filename是用动态路由的方式，所以你原来的方法获取不到了，动态路由有点类似restful风格，参数会解析到$route.params变量中

• 提问者 慕工程9243709 #1

  回复不能用 markdown。。。