路由传参的几种方式区别_vue路由跳转获取参数[通俗易懂]

大家好，欢迎来到IT知识分享网。

路由的参数分为params参数和query参数，而params传参又可分为在url地址栏中显示参数和不显示参数两种方式。

方式一：params传参（显示参数）

在路径中显示参数，在配置路由时，需要占位，地址栏表现为/search/123

刷新页面，参数还在

若要表示params参数可有可无，可在后面加上?

path: ‘/search/:keyword?’

声明式导航

<router-link :to=”/search/123″>搜索</router-link>

编程式导航

This.$router.push({‘/search/keyword’})

方式二：params传参（不显示参数）

在路径中不显示参数，在配置路由时，不需要占位，但是需要name

刷新页面，参数消失

path: ‘/search’,

name:’search’,

声明式导航

<router-link :to=”{name:’search’,params:{keyword:123}}”>搜索</router-link>

编程式导航

This.$router.push({

​ name:’search’,

​ params:{ keyword:123 }

})

获取params参数（注意这里是route，不是router）

this.$route.params.keyword

方式三：query传参

不需要设置占位，地址栏表现为地址栏表现为/search?keyword=123

跳转路由用name和path都可以

path: ‘/search’,

声明式导航

<router-link :to=”{path:’/search’,query:{keyword:123}}”>搜索</router-link>

编程式导航

This.$router.push({

​ path:’/search’,

​ query:{ keyword:123 }

})

获取query参数

this.$route.query.keyword

 ———————————————–

那么params参数和query参数能不能同时传递呢？当然可以

this.$router.push({

​ name:’search’,

​ params:{ keyword:123 },

​ query:{ id:001 }

});

以对象形式传参时需要注意，如果使用了params，只能使用name，不能使用path，因为如果提供了 path，params 会被忽略，此时获取到的params将会是undefined

 ——————————————–

路由传参的相关问题

params参数可以传递可以不传递，但是如果传递为空字符串，如何解决？

使用undefined解决

this.$router.push({

​ name:’search’,

​ params:{ this.keyword || undefined },

​ query:{ id:001 }

});