路由传值 path,name,

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js

本文详细介绍了在Vue.js中使用不同方式实现路由传参的方法，包括通过name传值、通过path传值及直接拼接参数等三种方式，并阐述了如何在目标组件中获取这些参数。

1.通过name传值

    fn(){
      this.$router.push({
        name:'My',
         params: {
	      参数名: 参数值
	      }
      })
    }

接收   this.$route.params.参数名
-------------------------------------------
路由设置
    {
        path: '/my',
        name:'My',
        component:My
    },

2.通过path

    fn(){
      this.$router.push({
        path:'/my',
        query:{
          参数名:参数值
        }
      })
    }

接收   this.$route.query.参数名
-------------------------------------------
路由设置
    {
        path: '/my',
        name:'My',
        component:My
    },

3.拼接参数传参


    {
        path: '/my?参数名=参数值',
        name:'My',
        component:My
    },
-------------------------------
this.$router.push('/my?xxx=值')

this.$router.push('/my/值')


接收    this.$route.query.xxx