Pinia+Router学习笔记(九)

简介: 本节记录路由历史记录相关内容

的replace属性:

  • 作用:控制路由跳转时操作历史记录的模式,如果加上了replace属性则跳转后会清除之前所有历史记录使浏览器不能后退
  • 使用方法(模板):
<router-link replace to="/reg">点击replace</router-link>

除这种用法外,也可以使用编程式路由导航router.replace

<template>
    <h1>小满最骚</h1>
    <button @click="replace">replace</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const replace = () => {
    router.replace('/reg')
}
</script>

<style scoped></style>

需要注意的是,router.replace中传入对象并指定name属性的方法已被废弃,若要使用配置对象请用path属性

<template>
    <h1>小满最骚</h1>
    <button @click="replace">replace</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const replace = () => {
    router.replace({
    path:'/reg',
  })
}
</script>

<style scoped></style>

go与back

作用:横跨历史,采用一个整数作为参数,表示在历史记录中前进或后退多少步
<template>
  <h1>小满最骚</h1>
  <button @click="next">next</button>
  <br />
  <button @click="back">back</button>
  <router-view></router-view>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const next = () => {
    // 正数表示前进,负数表示后退
    router.go(1)
  }
  const back = () => {
    router.back()
  }
</script>

完整示例:

<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <button @click="toPage('Login')">Login</button>
    <br />
    <button @click="toPage('Reg')">Reg</button>
    <br />
    <button @click="next">next</button>
    <br />
    <button @click="back">back</button>
    <br />
    <button @click="replace">replace</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (name: string) => {
    router.push({
        name,
    })
}
const replace = () => {
    router.replace({
        path:'/reg',
    })
}
const next = () => {
    router.go(1)
}
const back = () => {
    router.back()
}
</script>

<style scoped></style>
相关文章
|
存储 缓存 关系型数据库
⑩⑧【MySQL】InnoDB架构、事务原理、MVCC多版本并发控制
⑩⑧【MySQL】InnoDB架构、事务原理、MVCC多版本并发控制
362 0
|
11月前
|
编解码 JavaScript 前端开发
使用 MediaSource 规范实现自适应流播放
【10月更文挑战第26天】通过以上步骤,就可以使用MediaSource规范实现自适应流播放,根据网络状况动态地调整播放的码率,为用户提供更流畅的观看体验。需要注意的是,实际应用中还需要处理更多的细节和错误情况,以确保播放的稳定性和可靠性。
|
XML JSON 人工智能
Error while extracting response for type [class xxx] and content type application/xml;charset=UTF-8
Error while extracting response for type [class xxx] and content type application/xml;charset=UTF-8
2143 0
Saga模式在分布式系统中如何保证事务的隔离性
Saga模式在分布式系统中如何保证事务的隔离性
230 7
|
存储 缓存 NoSQL
如何解决Ubuntu server 下 Redis安装报错:“You need tcl 8.5 or newer in order to run the Redis test”.
如何解决Ubuntu server 下 Redis安装报错:“You need tcl 8.5 or newer in order to run the Redis test”.
731 0
|
机器学习/深度学习 传感器 数据采集
【BP回归预测】基于BP神经网络的回归预测附matlab完整代码
【BP回归预测】基于BP神经网络的回归预测附matlab完整代码
|
资源调度 前端开发
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
|
JavaScript
【Vue】—数据的双向绑定v-model
【Vue】—数据的双向绑定v-model
|
应用服务中间件 nginx
X-Accel-Redirect"和"X-Accel-Limit-Rate
X-Accel-Redirect"和"X-Accel-Limit-Rate
337 1
|
Linux 虚拟化
VMware虚拟机中Centos 6.x系统磁盘空间扩容实战
VMware虚拟机中Centos 6.x系统磁盘空间扩容实战
639 0