一级页面向二级页面传参，二级页面根据一级页面参数筛选数据渲染页面

最新推荐文章于 2022-09-11 01:02:14 发布

Shimeng_1989

最新推荐文章于 2022-09-11 01:02:14 发布

阅读量1.9k

点赞数

分类专栏：模块化文章标签：路由带参数跳转二级路由用一级路由参数 vue 模块化数据 path

本文链接：https://blog.csdn.net/Shimeng_1989/article/details/77017480

版权

本文介绍了在Vue应用中如何通过路由进行带参数的跳转，特别是在从一级页面向二级页面传递参数时的方法。在一级页面，使用`router-link`结合`path`和`query`进行跳转；在二级页面，通过`this.$route.query`获取并利用这些参数来筛选数据，进而渲染页面内容。

摘要由CSDN通过智能技术生成

通过路由进行带参数跳转

路由配置：（vue webpack可在index.js中配置）

   { 
 
  path: 
  '/ProductLists', 
 
  component:ProductLists 
 
   }

1、通过path 与 query 搭配进行传参（下面示例用此方法）

2、可通过 name 与 params 搭配进行传参

（一级页面）

HTML页面配置：

 
  < 
  div 
   class= 
  "lists" 
  > 
 

        
  < 
  router-link 
  :to=" { 
  path: 
  '/ProductLists', 
  query:{ 
  picName: 
  val. 
  name}}" 
  v-for="( 
  val, 
  index) 
  in 
  pic" 
   :key=" 
  index" 
   > 
 

最低0.47元/天解锁文章

Shimeng_1989

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一级页面向二级页面传参，二级页面根据一级页面参数筛选数据渲染页面

通过路由进行带参数跳转路由配置：（vue webpack可在index.js中配置）{path:'/ProductLists',component:ProductLists}1、通过path 与 query 搭配进行传参（下面示例用此方法）2、可通过 name 与 params 搭配进行传参（一级页面）HTML页面配置：
复制链接

扫一扫

专栏目录