若依开发模板路由问题：列表页的子页面数据层级化，页面打不开

Question

但是同级放的话，页面就能正常打开

怎么改成列表页的子页面可以放在列表页内呢？

https://gitcode.com/yangzongzhuan/RuoYi-Vue3/issues/68

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

根据你提供的信息，RuoYi开发模板中，你希望实现列表页的子页面数据层级化，并且能够正常打开。

这里的关键点在于路由配置。同级页面可以正常打开，是因为路径匹配直接，而列表页的子页面数据层级化，这个时候你需要使用的是路径参数（params）来实现。

具体实现步骤如下：

1. 在你的路由配置中，定义一个具有路径参数的路由，如下：

{
  path: '/list/:id',
  component: list组件
}

1. 在你需要跳转到的页面中，使用 $route.params.id 这个方式来获取参数传递给子组件。

<template>
  <!-- 你的子页面 -->
</template>
<script>
export default {
  props: {
    /**
     * @description id
     * @value 
     */
    id: [Number, String],
  },
  created() {
    console.log(this.$route.params);
  },
};
</script>

注意

这里需要注意的是，因为子页面的路由路径使用了路径参数（:id），所以在父页面的路由跳转中需要使用 this.$router.push({ name: '', params: { id: idValue } }) 这种方式传参，而不是 this.$router.push({ path: '', query: { id: idValue } }) 的方式， 因为路径参数会被解析为组件的 props。