温故而知新——vue常用语法(五)路由&storage

最新推荐文章于 2025-06-12 11:26:14 发布

多则惑少则明

最新推荐文章于 2025-06-12 11:26:14 发布

阅读量651

点赞数

CC 4.0 BY-SA版权

分类专栏：【技术】JavaScript/python/shell 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/huazhongkejidaxuezpp/article/details/110884234

【技术】JavaScript/python/shell 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了Vue.js的核心概念和技术，包括Vuex的状态管理、Vue路由的实现方式、axios的数据请求方法，以及Vue的指令、生命周期等关键特性，并探讨了MVVM模式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见问题

几种路由

1、路由出口： <router-view></router-view>

2、声明式导航：

<el-button size='small' type='warning'>
<router-link :to="{ path: '/newTask', query: {type:'update',data:scope.row}}">修改任务
</router-link>
</el-button>

跳转后的页面使用：

if(this.query.type == "add"){

}

body.taskInfo.id = this.query.data.id;

this.query = this.$route.query

3、编程式导航：

dowm(idx){
// router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})
// this.$router.push({path: "/handsonPage", query: { ...this.$route.query,project_id: idx}})
this.$router.push({path: "/handsonPage", query: { project_id: idx}})
},

什么是localStorage和sessionStorage

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在’
localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
sessionStorage作用域是窗口、协议、主机名、端口

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

sessionStorage语法：

sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。

sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。

sessionStorage.clear() //清除 sessionStorage 对象所有的项

json对象：

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

localStorage语法:

localStorage.setItem('hou', JSON.stringify(info));

localStorage.setItem('zheng', str);

if(localStorage.length>0){

}

工具封装

https://www.jb51.net/article/131264.htm

监听storage变化

用途：需要一个两个数据在全局共享，vue虽然提供了vuex模块来解决此问题，但是为了一两个数据的共享引入vuex未免小题大做，所以我们选择使用storage来保存共享数据，但有个问题就是如何监听storage的变化

范围：Storage 发生变化（增加、更新、删除）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

如果在另外一个路由(比如路由B)中，我们想根据watchStorage的变化来请求接口刷新页面数据的时候，可以在这个路由中created钩子函数中监听：

created() {
        window.addEventListener('setItem', ()=> {
            console.log(sessionStorage.getItem('username'))
            }
        }
  },