在Vue项目中，为了实现组件复用并避免过多的文件创建，使用了二级动态路由处理多个类型列表的详情展示。在不使用Vuex的情况下，通过路由的name或path+query传递数据。然而，当动态路由没有name时，为了避免URL中显示数据参数，选择了从根路由传递数据给一级路由，再由一级路由跳转到二级路由，通过路由守卫实现数据的隐式传递。
vue-router 二级动态路由传递数据
在做大创项目的时候，遇到这样一个需求。
根页面有个列表，点其中一条数据就会进入详情界面localhost/list/1。
点more按钮就会进入更多列表界面localhost/list。
由于有n个不同类型的列表，要做到组件复用，又不想创建n个vue文件。
项目也没必要用到Vuex
所以我采用了二级动态路由的方式。
/:name/:id 大概是这样的方式。
在这里就遇见了一个问题。
怎么将根目录的数据传输到二级路由展示？
一级路由可以通过<router-view></router-view> 向二级路由传递数据。而根路由却不行。
通过查询vue-router文档。传递数据可以用这几种方式
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
