日期:2024年8月9日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、基本概念
- 1、push 方法
- 2、replace 方法
- 三、区别与联系
- 1、联系
- 2、区别
- 四、完整示例
- 1、设置路由
- 2、使用 push 方法
- 3、使用 replace 方法
- 五、结语
一、前言
在 Vue.js
的世界里,Vue Router
扮演着至关重要的角色,特别是在单页面应用(SPA
)的开发中。Vue Router
不仅负责页面之间的跳转,还管理着页面的生命周期和状态。在 Vue3
中,Vue Router
提供了多种导航方式,其中最基本也最重要的是 push
和 replace
方法。这两种方法虽然目的相同,即进行页面跳转,但它们对浏览器历史栈的处理却大相径庭。
二、基本概念
1、push 方法
push
方法,从字面上理解,就是“推”一个新的记录到历史栈。在 Vue Router
中,当你使用router.push()
进行页面跳转时,这个新页面的 URL
会被添加到浏览器的历史记录中。这意味着用户可以点击浏览器的后退按钮,回到之前的页面。
形式 | 语法 | 示例 |
---|---|---|
声明式 | <RouterLink :to="xxx"> | <RouterLink to="/home">首页</RouterLink> |
编程式 | router.push(xxx) | router.push({ name: "home" }); |
2、replace 方法
与 push
不同,replace
方法虽然也会进行页面跳转,但是不会向历史记录中添加新记录,而是替换当前的记录。在使用 router.replace()
进行导航时,新的 URL
会替代当前页面的URL
记录。这意味着用户无法通过后退按钮回到之前的页面。
形式 | 语法 | 示例 |
---|---|---|
声明式 | <RouterLink :to="xxx" replace> | <RouterLink to="/home" replace>首页</RouterLink> |
编程式 | router.replace(xxx) | router.replace({ name: "home" }); |
三、区别与联系
1、联系
- 两者都是
Vue Router
提供的编程式导航方法,可以在JavaScript
代码中直接调用。 - 两者都可以用于改变当前路由,并导航到新的路由地址。
2、区别
内容 | push | replace |
---|---|---|
添加历史记录 | 是 | 否 |
后退按钮行为 | 可以回到上一页 | 不能回到上一页 |
适用场景 | 常规页面跳转 | 无后退需求的跳转 |
四、完整示例
下面,我们将通过一些简单的示例来展示 push
和 replace
方法在实际应用中的使用。
1、设置路由
首先,我们需要定义一些路由。假设我们有以下两个组件:Home.vue
和 About.vue
。
src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,
});export default router;
src/main.js
import { createApp } from 'vue'
import App from './App.vue'// import router from '@/router/index'
import router from '@/router'const app = createApp(App)
app.use(router)
app.mount('#app')
2、使用 push 方法
在组件中,我们可以通过 this.$router.push
来导航到不同的路由。
<template><button @click="goToHome">首页</button>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();function goToHome() {router.push({ path: '/' });// 也可以名字跳转// router.push({ name: 'Home' });
}
</script>
在上面的例子中,点击按钮会导航到主页,并在历史记录中添加一条新记录。
3、使用 replace 方法
同样地,我们可以使用 router.replace
来替换当前的历史记录。
<template><button @click="goToAbout">关于(Replace)</button>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();function goToAbout() {router.replace({ path: '/about' });// 也可以名字跳转// router.replace({ name: 'About' });
}
}
</script>
在这个例子中,点击按钮会导航到关于页,但不会在历史记录中添加新记录。如果用户尝试点击后退按钮,他们将不会返回到前一个页面。
五、结语
通过上述讲解,我们可以看到 push
和 replace
方法在 Vue Router
中的不同用途。push
方法适用于大多数导航情况,而 replace
方法则适用于那些不需要用户返回的情况,如登录后的重定向。了解这两个方法的使用场景,可以帮助我们更好地控制应用的路由行为。
参考文章:s
- 《Vue Router》
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/141059537