vue路由传参方式的几种方式与获取参数

一、声明式传参

1.params传参(显示参数)

在url中会显示出传参的值，刷新页面不会失去拿到的参数，使用该方式传值的时候，需要子路由提前配置好参数：

const router = new VueRouter({<router-link to="/about/12">跳转</router-link>

const router = new VueRouter({<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>

2.params传参(不显示参数)

在url中不会显示出传参的值，但刷新页面会失去拿到的参数，使用该方式 传值 的时候，需要子路由提前配置好name参数:

const router = new VueRouter({<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>

3.query 传参

query 传过去的参数会拼接在地址栏中（?name=xx），刷新页面数据不会丢失，使用path和name都可以：

const router = new VueRouter({<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link><router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>

二、编程式传参

1.params传参(显示参数)

2.params传参(不显示参数)

3.query 传参

三、获取参数

1、params的获取方式

this.$route.params.xxx

2、query的获取方式

this.$route.query.xxx

四、需要注意的点

1、如果使用params传参,且参数是以对象的形式，跳转路径只能使用name形式而不能用path.

2、如果想要params参数想传参也可以不传参需要在占位符后面加?。

const router = new VueRouter({path: '/search/:keyword?',component: () => import('@/pages/Search'),query: { keyword: this.keyword },

3、解决params传值为空字符串路径会出现问题：

params: { keyword: "" || undefined },query: { keyword: this.keyword },