vue-router路由传参

二七二十七

已于 2022-09-06 15:51:19 修改

阅读量327

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-07-27 23:19:11 首次发布

本文链接：https://blog.youkuaiyun.com/lhh_gxx/article/details/126025230

版权

Vue2 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue路由中的两种参数传递方式：params用于POST类似传参，隐藏于路径后，适合命名路由；query用于GET方式，参数可见于地址栏，适用于path配置。详细讲解了各自的用法和注意事项。

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

                    
                        
                    
                    路由传参 
配置路由映射{
  // 映射路径
  path: '/payWait',
  // 组件名
  name: 'payWait', 
  // 组件位置
  component: () => import('@/views/canteenRecharge/payWait'),
  // title路由元信息自定义的属性，通过全局后置导航守卫为页面添加标题
  meta: { title: '食堂码' }
}
 
当需要将参数从一个组件传递到另外一个组件时，可以参考以下
通过路由传值有两种方式：params和query，两者区别如下
 
param传参 
相当于post请求，参数不会再地址栏中显示
配置路由格式：path: ‘/xxx/:传参名’，使用“:传参名”进行占位，传递后形成的路径如：/router/123, /router/abc
需要使用命名路由，即需要配置 name: ‘xxx’；因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined
被传参的页面若跳到别的页面或者刷新页面的时候参数会丢失// 路由配置文件中进行如下配置
routes: [
    {
        name: 'newPage',
        // 使用':传参名'拼接在路径后进行占位
        path: '/newPage/:id',
        component: () => import('../views/newPage.vue')
    },	
    ...
]

// 通过params传参
this.$router.push({
    name: "newPage", // params对应路由跳转命名路由
    params: {
    	id: this.id
	}
});

// 另外一个页面使用params接收参数
console.log(this.$route.params.id)
 
 
query传参 
相当于get请求，页面跳转的时候，可以在地址栏看到请求参数
需要配置 path: ‘xxx’；通过路径进行跳转传参
使用query接受参数routes: [
	{
        path: '/newPage',
        component: () => import('../views/newPage.vue')
    },	
    ...
]

// 通过query传参
this.$router.push({
    path: "/newPage", // query对应路由跳转为path方式
    query: {
    	id: this.id
	}
});

// 另外一个页面使用query接收参数
console.log(this.$route.query.id)
 

                