在Vue 3中的路由传参🔥🔥

在Vue 3中，路由传参主要通过vue-router实现。以下是两种常见的路由传参方式：

使用路由的params属性进行传递。这适用于需要在URL中始终可见的参数。

// 定义路由时指定参数

const routes = [

 { path: '/user/:id', component: User }

]

// 导航到一个路由，并传递参数

this.$router.push({ name: 'User', params: { id: 123 }})

// 在User组件中接收参数

export default {

 props: ['id'],

 mounted() {

   console.log('User ID:', this.id)

 }

}

使用路由的query属性进行传递。这适用于不需要在URL中可见，但需要在路由间共享的参数。

// 导航到一个路由，并传递查询参数

this.$router.push({ path: '/search', query: { keyword: 'Vue3' }})

// 在Search组件中接收参数

export default {

 mounted() {

   console.log('Search Keyword:', this.$route.query.keyword)

 }

}

在路由定义时，可以通过:paramName语法来定义参数，然后在组件中通过this.$route.params.paramName来获取。对于查询参数，可以通过this.$route.query.queryName来获取。