面试题：Svelte动态路由参数传递中的数据类型处理

确保参数数据类型一致性及解析使用

传递数据：
- 在Svelte中，动态路由传递参数一般是通过URL进行的。由于URL只能传递字符串类型的数据，所以对于复杂对象（包含字符串、数字、数组等多种数据类型），需要先将其转换为字符串。可以使用JSON.stringify()方法将复杂对象转换为JSON字符串。
- 例如，假设有一个复杂对象{name: 'John', age: 30, hobbies: ['reading', 'coding']}，在路由跳转时：
```
<script>
import { goto } from '$app/navigation';
const myObject = {name: 'John', age: 30, hobbies: ['reading', 'coding']};
const objectString = JSON.stringify(myObject);
const route = `/my - route/${objectString}`;
goto(route);
</script>
```

接收数据：

在接收端，从URL中获取参数后，需要将其转换回原来的对象。可以使用JSON.parse()方法。
假设在my - route.svelte组件中接收参数：

<script>
import { page } from '$app/stores';
$: {
    const param = $page.params[0];
    const myObject = JSON.parse(param);
    const name = myObject.name;
    const age = myObject.age;
    const hobbies = myObject.hobbies;
}
</script>

潜在问题及解决方案

数据丢失或损坏：
- 问题：如果在JSON.stringify()或JSON.parse()过程中出现错误，可能导致数据丢失或损坏。例如，对象中包含循环引用，JSON.stringify()会报错。
- 解决方案：在传递数据前，确保对象结构是可以被JSON序列化的。对于复杂对象，在序列化前可以对其进行预处理，去除循环引用等不支持的结构。在接收端，使用try - catch块包裹JSON.parse()操作，以捕获并处理可能的解析错误。
```
<script>
import { page } from '$app/stores';
$: {
    const param = $page.params[0];
    let myObject;
    try {
        myObject = JSON.parse(param);
    } catch (error) {
        console.error('Error parsing JSON:', error);
        // 可以提供默认值
        myObject = {name: 'default', age: 0, hobbies: []};
    }
    const name = myObject.name;
    const age = myObject.age;
    const hobbies = myObject.hobbies;
}
</script>
```

URL长度限制：

问题：不同浏览器对URL长度有限制，一般在2000个字符左右。如果复杂对象转换为字符串后长度过长，可能导致URL超出限制，从而无法正常传递参数。
解决方案：可以考虑使用其他方式传递数据，比如将复杂对象存储在本地存储（localStorage）或会话存储（sessionStorage）中，并在路由跳转时传递一个标识符，接收端根据标识符从存储中获取数据。
例如，在发送端：

<script>
import { goto } from '$app/navigation';
const myObject = {name: 'John', age: 30, hobbies: ['reading', 'coding']};
const id = new Date().getTime();
localStorage.setItem(`myObject_${id}`, JSON.stringify(myObject));
const route = `/my - route/${id}`;
goto(route);
</script>

在接收端：

<script>
import { page } from '$app/stores';
$: {
    const id = $page.params[0];
    const objectString = localStorage.getItem(`myObject_${id}`);
    const myObject = JSON.parse(objectString);
    localStorage.removeItem(`myObject_${id}`);
    const name = myObject.name;
    const age = myObject.age;
    const hobbies = myObject.hobbies;
}
</script>

安全性问题：

问题：如果传递的参数包含敏感信息，直接在URL中传递不安全，可能会被截获或记录在日志中。
解决方案：对敏感数据进行加密后再传递。可以使用一些加密库，如crypto - js。在发送端加密数据，接收端解密数据。
例如，使用crypto - js加密：

<script>
import CryptoJS from 'crypto - js';
import { goto } from '$app/navigation';
const myObject = {name: 'John', age: 30, hobbies: ['reading', 'coding']};
const encrypted = CryptoJS.AES.encrypt(JSON.stringify(myObject), 'secretKey').toString();
const route = `/my - route/${encrypted}`;
goto(route);
</script>

在接收端解密：

<script>
import CryptoJS from 'crypto - js';
import { page } from '$app/stores';
$: {
    const encrypted = $page.params[0];
    const bytes = CryptoJS.AES.decrypt(encrypted,'secretKey');
    const objectString = bytes.toString(CryptoJS.enc.Utf8);
    const myObject = JSON.parse(objectString);
    const name = myObject.name;
    const age = myObject.age;
    const hobbies = myObject.hobbies;
}
</script>

面试题：Svelte动态路由参数传递中的数据类型处理

知识考点

面试题答案

确保参数数据类型一致性及解析使用

潜在问题及解决方案