首页 前端知识 vue 路由跳转方式;刷新页面后 params 参数的丢失问题

vue 路由跳转方式;刷新页面后 params 参数的丢失问题

2024-03-12 01:03:16 前端知识 前端哥 35 750 我要收藏

路由跳转方式

方式一:router-link

不带参数

<router-link :to="{ name: 'home' }" />
<router-link :to="{ path: '/home' }" />
// name 和 path 都可以,建议用 name
// 注:router-link 中链接如果是 '/' 开始就是从根路由开始,如果开始不带 '/' ,则从当前路由开始

带参数

<router-link :to="{ name: 'home', params: { id: 1 } }" />
// params 传参数(类似 post 请求)。路由配置 path: "/home/:id" 或 path: "/home:id"
// 不配置path,第一次可请求,刷新页面后 id 会消失;配置path,刷新页面后 id 会保留
// html 取参:$route.params.id
// script 取参:this.$route.params.id


<router-link :to="{ name: 'home', query: { id: 1 } }" />
// query 传参数(类似 get 请求,url 后面会显示参数)
// 路由可不配置
// html 取参:$route.query.id
// script 取参:this.$route.query.id
方式二:this.$router.push()

不带参数

this.$router.push('/home')
this.$router.push({ name: 'home' })
this.$router.push({ path: '/home' })
// path 和 name 路由跳转方式,都可以使用 query 传参
// params 传参,push 里面只能是 name: 'xxx',不能是 path: '/xxx',因为 params 只能用 name 来引入路由,如果这里写成了 path 的话,接收参数页面会是 undefined

query 方式传参

this.$router.push({ name: 'home', query: { id: '1' } })
this.$router.push({ path: '/home', query: { id: '1' } })
// html 取参:$route.query.id
// script 取参:this.$route.query.id

params 方式传参

this.$router.push({ name: 'home', params: { id: '1' } }) // 只能用 name 引入路由
// 路由配置 path: "/home/:id" 或者 path: "/home:id",配置是在 router 文件里配置的
// 不配置 path,第一次可请求,刷新页面 id 会消失;配置 path,刷新页面后 id 会保留
// html 取参:$route.params.id
// script 取参:this.$route.params.id

query 和 params 区别

query:类似 get 请求,跳转之后页面 url 后面会拼接参数,类似 ?id=1,非重要性的可以这样传,密码之类还是用 params 方式

params:类似 post 请求,跳转之后页面 url 后面不会拼接参数,但是刷新页面 id 会消失
方式三:this.$router.replace()

用法与 this.$router.push() 一样

方式四:this.$router.go(n)
this.$router.go(n) // 向前或者向后跳转 n 个页面,n 可为正整数或负整数

router.go(1) // 在浏览器记录中向前进一步,等同于 history.forward()

router.go(-1) // 后退一步记录,等同于 history.back()
路由跳转总结
// 跳转到指定 url 路径,并向 history 栈中添加一个记录,点击后退会返回到上一个页面
this.$router.push()

// 跳转到指定 url 路径,但是 history 栈中不会有记录,点击返回会跳转到上上个页面(相当于直接替换了当前页面)
this.$router.replace()

// 向前或者向后跳转 n 个页面,n 可为正整数或负整数
this.$router.go(n)
$router 和 $route 的区别
$router:是路由操作对象,只写对象
$route:是路由信息对象,只读对象

// $router 操作路由跳转
this.$router.push({ name: 'home', params: { name: '张三', age: '18' } })

// $route 读取路由参数
const name = this.$route.params.name

页面跳转($router)方式

方式一(刷新页面参数会丢失)

此方法不会在浏览器 url 地址栏中显示传递的参数

this.$router.push({ name: 'a', params: { name: '张三', age: '18' }}) // 页面跳转

this.$route.params // 参数接收

方式二(刷新页面参数不会丢失)

此方法会在浏览器 url 地址栏中显示传递的参数(数据会暴露在外面),即:'a?name=张三&age=18'

this.$router.push({ path: 'a', query: { name: '张三', age: '18' }}) // 页面跳转

this.$route.query // 参数接收

刷新页面后 params 参数丢失

发送数据的页面A

this.$router.push({ name: 'A', params: { name: '张三', age: '18' }})

接收数据的页面B

this.curObj = this.$route.params

当进入 B 页面后,按 F5 刷新页面 B 页面接收的参数会丢失。

解决办法

使用 localStorage 或 sessionStorage 浏览器自带的 mini 数据库(即本地存储)

存储在 localStorage 里的数据如果不是主动去清除的话,就算浏览器关闭了,下次打开浏览器数据还是会存在,是一个长期的存在。

存储在 sessionStorage 里的数据只要关闭浏览器就会自动清除,但是刷新网页不会清除,是一个临时的存在。

可以利用 vue 里浏览器刷新不会触发 beforeDestory 生命周期函数和数据储存本地这两个方法来补全 params 刷新丢失数据的短板。

发送数据的页面A

this.$router.push({ name: 'A', params: { name: '张三', age: '18' }})

接收数据的页面B

mounted() {
  let routeParam = this.$route.params
  if (Object.entries(routeParam).length === 0) {
    routeParam = JSON.parse(sessionStorage.getItem('storageObj')) // 从本地存储中获取数据
  } else {
    sessionStorage.setItem('storageObj', JSON.stringify(routeParam)) // 将数据储存在本地存储里面
  }
  this.curObj = routeParam
},
beforeDestroy() {
  sessionStorage.removeItem('storageObj') // 将数据从本地存储删掉
},

没有用 localStorage 是因为如果用户跳转到页面 B 后,直接关闭浏览器,再打开浏览器输入网址,就能从本地存储找到该数据,但 sessionStorage 关闭浏览器,数据就消失了。不会出现 localStorage 的问题。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3667.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!