vue中路由传参的三种方式

最新推荐文章于 2022-07-19 17:16:06 发布

汉武大帝·

最新推荐文章于 2022-07-19 17:16:06 发布

阅读量134

点赞数 1

分类专栏： vue-router

本文链接：https://blog.csdn.net/yinge0508/article/details/119542397

版权

vue-router 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了在 Vue 中使用 $router.push 进行页面跳转时，三种不同方式传递参数的方法：通过 path、params 和 query。第一种和第三种方式在页面刷新后数据不会丢失，而第二种方式在刷新后数据会丢失。组件中通过 this.$route.params 或 this.$route.query 来获取参数，对于需要持久化的数据，应使用 params 或 query。

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

第一种，第三种方法页面刷新数据不会丢失; 第二种方法页面刷新数据会丢失;

方式跳转方式对应路由获取参数方式

第一种

方式	跳转方式	对应路由	获取参数方式
第一种	//直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, })	`{ path: '/particulars/:id', name: 'particulars', component: particulars }`	`this.$route.params.id`
第二种	`this.$router.push({ name: 'particulars', params: { id: id } })`	`{ path: '/particulars', name: 'particulars', component: particulars }`	`this.$route.params.id`
第三种	`this.$router.push({ path: '/particulars', query: { id: id } })`	`{ path: '/particulars', name: 'particulars', component: particulars }`	`this.$route.query.id`

//直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })

{
  path: '/particulars/:id',
  name: 'particulars',
  component: particulars
}

this.$route.params.id

第二种

this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

this.$route.params.id

第三种

this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

this.$route.query.id

组件中获取参数的时候是 route.params 这很重要~~~

汉武大帝·

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中路由传参的三种方式

第一种，第三种方法页面刷新数据不会丢失;第二种方法页面刷新数据会丢失;方式跳转方式对应路由获取参数方式第一种 //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`, }) { path: '/particulars/:id', name: 'particulars',...
复制链接

扫一扫

专栏目录