vue路由，本地存储，刷新页面（学习心得）

简介：

        在使用vue单独做一个网站时，会使用到路由和本地存储，这次主要介绍我在学习路由和本地存储使用到的一种方法。

路由：

        vue里面的路由类似于html内的a标签，使用前需要导入路由的包；这个一般使用了路由后会自动导入的，可以去main.js内查看是否有router的包导入。

        那么使用路由可以有三种方法:

        第一种：使用name+params的方法，这里的name是index.js内路由的name

this.$router.push({name:'home',params:{refresh: true}})

例如我的路由的path和name是’/‘和’home‘：

第二种：使用path+query

​
this.$router.push({path:'/',query:{（参数自己设定，这里举个例子）refresh: true}})

​

        需要注意，如果使用了path后不能加params，不然params没有效果。

还有一种比较常用，但是能看到传输的值

this.$router.push('/?username='+this.ruleForm.username),

这三种办法都可以使用路由传值，
 

        但是，使用路由传值不方便把值传到app.vue里面，

此时我们就需要本地存储来解决这个问题：

localStorage.setItem('username',this.ruleForm.username)

使用这种方式将需要的值存储到本地，

这个是永久存储，方便以后记住账号密码的功能的实现，

这里的username是key，

this.ruleForm.username指我这个页面要获得到并且需要传输的值，

但是存储到本地后新的页面后页面不会自动获得里面的值并且传到app.vue对应的参数上，

这时，我就想到做一个生命周期函数，借用生命周期函数赋值，然后再调用,

this.username=localStorage.getItem('username')

        但是又出现新的问题，生命周期函数在路由跳转的时候不会自动刷新，这是就想着在跳转时刷新页面：

window.location.reload()

把这段代码放在路由后面，这样就可以在路由到新的页面后主动刷新整个页面。

假如我在一个页面上需要跳转到’home‘页面时，app.vue内部需要修改得到一些值时：

        这里我在一个方法内部定义了路由，在路由跳转后存值到本地，然后再刷新页面，为了我在app.vue时使用

        在app.vue中使用created方法，在上面存储值到本地时，刷新一整个页面来激活created方法，在方法内进行对本地的值获取并且调用。

这里介绍本地永久存储的使用：

要使用存储到的值，需要先定义：

使用：localStorage.setItem(key,value)

key的名字自定义，value是对应存储key的值，

例如：

localStorage.setItem('username','123')

获取值：

localStorage.getItem(key)

这里的key对应上面的key，用来获得’123‘

例如：

localStorage.getItem(’username‘)

当网页不需要这个值的时候需要删除这个值，用来释放一定的内存：

localStorage.removeItem(key)

例如：

localStorage.removeItem(’username‘)

这样就可以删除本地存储的username，释放username所占用到的内存。

总结：

        在我从一个页面跳转到新的页面并且需要修改或者给app.vue内的参数赋值时，可以先用localStorage.setItem(key,value)存值到本地，然后在路由跳转后使用 window.location.reload()刷新一整个页面，最后在app.vue的created内获得本地存储的值并且把他赋给一个变量或者修改这个变量。