vue3 路由出现乱码
时间: 2023-10-07 13:12:55 浏览: 62
在Vue3中,路由出现乱码的问题可以通过以下步骤解决:
1. 在路由传参时,使用encodeURI对参数进行编码,例如:
```
this.$router.push({ path:"/index", query:{ msg: encodeURI("我是消息") } })
```
2. 在下一个页面加载时,通过this.$route.query.msg读取导航栏中的参数,同时使用decodeURI对参数进行解码,例如:
```
this.msg = decodeURI(this.$route.query.msg);
```
3. 如果导航栏中的参数是中文,提前使用decodeURI包裹this.$route.query.msg可以解决中文乱码问题。
下面是一个示例代码:
```javascript
export default {
data() {
return {
msg: ""
}
},
created() {
this.msg = decodeURI(this.$route.query.msg);
}
}
```
请注意,这里的示例代码是基于Vue.js和vue-router的使用情境,确保你已经引入了相应的库文件。
希望以上解答对你有帮助。如果还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue路由跳转传参乱码解决](https://blog.csdn.net/a_b_ccv/article/details/103455108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Vue Router路由搭建](https://blog.csdn.net/weixin_41819731/article/details/99621584)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]