Vue.js之this.$route.params和this.$route.query的区别（附代码）

最新推荐文章于 2023-11-27 14:14:04 发布

原创最新推荐文章于 2023-11-27 14:14:04 发布 · 678 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了Vue.js中路由参数的两种传递方式：query和params。通过示例展示了如何在router/index.js配置路由，如何在组件中传递和获取参数，并分析了它们在URL中表现形式的区别。query参数会显示在URL中，而params参数则不会。

this.$route.query的使用

1、在router/index.js文件进行编辑

{
 path:'/index',
 component: index,
 //添加路由
 children:[
   {
    path:':shopid',
    component:detail
   }
 ]     

},

2、传参数

this.$router.push({
        path: '/index/detail', 
        query:{shopid: item.id}
        });

3、获取参数

this.$route.query.shopid

4、url的表现形式(url中带有参数)

http://localhost:8080/#/index/detail?shopid=1

this.$route.params的使用

1、router/index.js

{
     path:'/index',
     component: index,
     //添加路由
     children:[
       {
        path:"/detail",
        name:'detail',
        component:detail
       }
     ]     

    },

2、传参数（ params相对应的是name ， query相对应的是path）

this.$router.push({
        name: 'detail', 
        params:{shopid: item.id}
        });

3、获取参数

this.$route.params.shopid

4、url的表现形式(url中没带参数)

http://localhost:8080/#/index

还有另外一种可以看到参数的方式

1.传参数

{
        path: '/Page/:shopid/:abc',
        name: 'Page',
        component: Page
    }

2、获取参数

this.$route.params.shopid
this.$route.params.abc

3、url的表现形式(url中带参数)

http://localhost:8080/#/index/123/456