Vue-Router 第六节：历史记录

1、router.replace() 替换当前位置

我们除了使用 <router-link> ,router.push进行页面的跳转,我们还可以使用编程式的： router.replace(...)

它与router.push的区别在于它在导航时不会向 history 添加新记录，也就是取代了当前页。

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
​
​
<router-link :to="..." replace> 
// 相当于
router.replace(...)
​

// App.vue
<template>  
    <div>      
        <button @click="toPages">通过替换位置replace进入user路由页面</button>  
    </div>
</template>
​
<script setup lang="ts">  
    import { useRouter } from 'vue-router'; 
    const router = useRouter()  
    const toPages = () => {  
       router.replace({path:'user'})   
</script>

   // router/index.vue 页面
   
   {
        path: '/user/:id?',
        name: 'user',
        component: import("@/views/user/index.vue")
    }

2、router.go() 横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步。

// 向前移动一条记录，与 router.forward() 相同
router.go(1)
​
// 返回一条记录，与 router.back() 相同
router.go(-1)
​
// 前进 3 条记录
router.go(3)
​
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

      // router/index.vue 页面
   
   {
        path: '/user',
        name: 'user',
        component: import("@/views/user/index.vue")
    },
    {
        path: '/userOne',
        name: 'userOne',
        component: import("@/views/user/userOne.vue")
    },
    {
        path: '/userTwo',
        name: 'userTwo',
        component: import("@/views/user/userTwo.vue")
    }

    // App.vue
​
<template>  
    <div>   
    <button @click="toPages">进入user路由页面</button>  
    <button @click="toPagesOne">进入userOne路由页面</button>  
    <button @click="toPagesTwo">进入userTwo路由页面</button>  
    <br>
    <button style="background-color: cadetblue;" @click="toGo">前进一个</button>  
    <button style="background-color: cadetblue;" @click="toBack">后退一个</button>  
  </div>
</template>
​
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
​
const toPages = () => {
  router.push({path:'user'})
}
​
const toPagesOne = () => {
  router.push({path:'userOne'})
}
​
const toPagesTwo = () => {
  router.push({path:'userTwo'})
}
​
const toGo = () => {
  router.go(1)
   // router.forward()
}
​
const toBack = () => {
  router.go(-1) 
  //  router.back()
}
​