vue3的路由传参有那些

1. 使用Query传递参数

定义路由：

const routes = [
  { path: '/user', name: 'User', component: User }
]

导航到该路由并传递参数：

• 在代码中使用this.$router.push()：

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

• 或者直接在URL中添加查询参数：

  http://yourdomain/user?id=123&name=张三

在目标组件中获取参数：

console.log(this.$route.query.id) // 输出: 123
console.log(this.$route.query.name) // 输出: 张三

注意事项：

• 编码问题：Vue Router使用encodeURIComponent函数对参数进行编码，但是encodeURIComponent 不会对某些特定字符进行编码，这些字符包括字母（A-Z, a-z）、数字（0-9）以及以下特殊字符：- _ . ! ~ * ' ( )。如果你需要对这些字符也进行编码，或者你有其他特定的编码需求，可以采取以下几种方法来实现。          

        1. 自定义编码函数

             你可以编写一个自定义的编码函数，覆盖 encodeURIComponent 的默认行为，对所有字符进行编码，包括那些默认不编码的字符。

示例代码：

function fullEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    // 单引号、感叹号、括号和星号等字符的编码
    return '%' + c.charCodeAt(0).toString(16).toUpperCase();
  });
}