vue2.x 常见路由传值

最新推荐文章于 2025-02-21 16:30:00 发布

原创最新推荐文章于 2025-02-21 16:30:00 发布 · 586 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue2.x技术分享专栏收录该内容

9 篇文章

订阅专栏

本文详细讲解了Vue路由中params与query两种传值方式，包括各自的使用场景、优缺点，以及如何在`<router-link>`中灵活运用。特别提示了params可能导致数据刷新丢失的问题及query的持久性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue常见的两钟路由传值方式...

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
    path: '/',
    name: 'index',
    component: Index,
    redirect: '/index',
    children: [
         {
        path: '/index',
        name: 'Index',
        meta:{title: 'a'},
        component: () => import('../views/narTable/index.vue'),
      },
      {
        path: '/privilege',
        name: 'Privilege',
        meta:{title: 'b'},
        component: () => import('../views/narTable/privilege.vue'),
      },
      {
        path: '/my',
        name: 'My',
        meta:{title: 'c'},
        component: () => import('../views/narTable/my.vue'),
      },
    ]
]

1.通过路由名+params (name+params) 的方式传参（不常用）

//name 为router.js中配置的name,parmars为传递参数，可以传递多个
this.$router.push(name:"My",parmars:{id:1,code:"2"})

在跳转的页面接收时使用this.$route.parmars.参数名来接收！

如： this.id = this.$route.parmars.id

this.code = this.$route.parmars.code

*路由名+params的方式传参会因为页面刷新而数据丢失！

2.通过路由路径 + query (path+query) 的方式跳转传参

//path 为router.js中配置的path,query为传递参数，可以传递多个
this.$router.push(path :"/my",query:{id:1,code:"2"})

在跳转的页面接收时使用this.$route.query.参数名来接收！

如： this.id = this.$route.query.id

this.code = this.$route.query.code

*路由路径+query 的方式传参不会因为页面刷新而数据丢失！

***注意：传递参数时我们使用 this.$touter ，接收参数时我们使用

我们在通过<router-link> 标签中的to路由跳转时，同样也是通过path+query 和 name+params

<router-link :to = "{ path: '/my', query: { id: 1 } }">跳转到my页面</router-link>
<router-link :to = "{ name: 'My', params: { id: 1 } }">跳转到my页面</router-link>