vue2路由传参之params

一枚平平无奇的冲浪者

已于 2022-05-22 19:03:12 修改

阅读量1.4k

点赞数

文章标签： javascript 前端 vue.js

于 2022-05-22 18:47:52 首次发布

本文链接：https://blog.csdn.net/qq_45272615/article/details/124914375

版权

本文详细介绍了Vue Router中如何通过params传递参数，包括在路由配置中声明参数、通过to字符串和to对象两种方式传递参数，并强调了使用name配置而非path配置的重要性，同时展示了错误示例，帮助开发者避免遇到空白页面和参数丢失的问题。

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

params传参

注意：使用params传参对象，如果使用to对象写法，必须用name配置，不能使用path配置，否则会出错！！！

1.配置路由声明接收params参数（$route.params.参数名）

const routes = [
  {
      name:"chuancan",//name必须要写
      path: 'zhanshi/:id/:title', //去传参 :为占位符 
            // 表示接收的参数为id和title
      component: Zhanshi,
      meta: {
            title: "传参"
      },
  }
]

2.传递参数

1.路由跳转并携带params参数 to字符串写法（使用模板字符串，js才会解析）

 <router-link         
  :to="
 `/search/home/zhanshi/${item.id}/${item.title}`
 "                       
    >{{ item.title }}</router-link
   >

2.路由跳转并携带params参数 to对象写法（使用name配置项）

 <router-link
          :to="{
            name:'chuancan',//必须写name，不能写path
            params: {
              id: item.id,
              title: item.title,
            },
          }"
       >{{ item.title }}
 </router-link
 >