路由传参的几种方式

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

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

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

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

path: '/search/:id?'

声明式导航

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

编程式导航

This.$router.push({'/search/id'})

 

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

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

刷新页面，参数消失

path: '/search',

name:'search',

声明式导航

<router-link :to="{name:'search',params:{id:123}}">搜索</router-link>

编程式导航

This.$router.push({name:'search',params:{ id:123 }})

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

this.$route.params.id

 

方式三：query传参

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

跳转路由用name和path都可以

path: '/search',

声明式导航

<router-link :to="{path:'/search',query:{id:123}}">搜索</router-link>

编程式导航

This.$router.push({path:'/search',query:{ id:123 }})

获取query参数

this.$route.query.id