Vue2中路由传参的两种方式

原创已于 2022-10-17 13:01:31 修改 · 870 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

于 2022-10-17 10:21:55 首次发布

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue中进行路由传参的两种主要方式：query和params。对于query方式，无论是字符串写法还是对象写法，参数都通过this.$router.query访问；而params方式下，参数通过this.$route.params获取，需要注意的是使用params传参时必须配合name属性进行路由跳转，不能使用path。此外，params传参还需要在router/index.js文件中预先定义路由规则，用占位符如:id/:title。

路由传参方式

一、query方式

to字符串写法

  <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

to对象写法


        <!-- 路由传参 to的对象写法 -->
        <router-link :to="{
           name:'xiangqing',
            query:{
                id:m.id,
                title:m.title
            	}
            }">
            {{m.title}}
        </router-link>&nbsp;&nbsp;
        </li>

接受方式

this.$router.query.id
this.$router.query.title

二、params方式

在路由前的组件通过:to="/home/message/detail/${m.id}/${m.title} 传递参数
to的字符串学法

 <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;

to的对象写法

        <router-link :to="{
          name:'xiangqing',
          params: {
            id : m.id,
            title:m.title
          }
        }">
        {{m.title}}
      </router-link>&nbsp;&nbsp;

!!!注意在param方式使用to的对象方式传参必须使用 name属性去跳转路由不能用path

        <router-link :to="{
          path:'/home/message/detail',   //这种方式报错
          params: {
            id : m.id,
            title:m.title
          }
        }">
        {{m.title}}
      </router-link>&nbsp;&nbsp;

params 方式需要在router/index.js文件中找到对应的路由规则,用 /:id/:title 去占位

          // 这是一个嵌入路由规则
          children: [
            {
              name:'xiangqing',
              path: 'detail/:id/:title',
              component: Detail
            }

接受数据

this.$route.params.id
this.$route.params.title