前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)

路由跳转，这属于路由参数获取外，用的第一多的功能。下面示例 vue-router 中 4 种常见的跳转用法。

普通跳转

这是常用的用法，不做过多描述。

声明式：

编程式：

replace 跳转

一开始我不太理解 replace 有什么用，但当我用到 element-ui 中的 breadcrumb 面包屑功能时，注意到了其中 replace 属性。

replace: 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录

有什么用？

我们都知道路由有 history 功能，每当点击浏览器返回时，将回到之前访问的页面记录。

假如页面设计有 3 层(首页、产品列表、产品详情页)，当从 1 级页面(首页)跳转到 2 级页面(产品列表)后，我们点击浏览器后退按钮一切都正常；但当 2 级页面跳转到 3 级页面(详情页)后，再返回 2 级页面似乎也没问题，但当你再次返回时，却又回到了 3 级页面(其实用户想回到最初的 1 级页面，虽然代码上符合逻辑，但现在一定出错了)

原先我遇到类似问题，都是在最后级页面通过“写死”的路由地址来解决这个 bug，但其实现在有更好的方式，那就是 replace 。

如下是模拟这 bug 的重现：

tab 从：路由跳转 –> 动态路由 –> 路由跳转(清除 history) –> 参数传递

最后 浏览器返回 后，路由没有切换到上次访问的路由记录，而是跳到再上次的记录。

声明式：

编程式：

重定向

重定向概念多数出现在服务器端，但路由中的重定向你一定也见过，虽然原理不同，但最终的“效果”类似。

最终你访问 / 时，页面地址会变成 /router ，并渲染 /router 对应的 component。

但需注意：浏览器并没有收到类似 3xx 的重定向状态码。

“前进/后退” 跳转

如下方式，可以在业务代码中实现浏览器返回功能：

类似还有 router.back， router.forward，他们都是基于 window.history 相关 api 来实现的功能：

总结

展示比较基础的路由跳转功能示例。

值得一提的是中间 replace 功能，能解决我们多级页面某些“不合预期”的需求。如果你熟悉 html5 的 pushState 相关知识点，那也很好理解“前进/后退”的跳转。

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。

androidstuio实现页面跳转_vue-router 基础：4类路由跳转示例相关推荐

antd点击跳转页面且有参数_vue-router 基础：4类路由跳转示例
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读) 路由跳转,这属于路由参 ...
vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
vue中的路由跳转方法，详细（vue路由跳转）
一.<router-link/>方式简述:通过to属性和path和name进行跳转,并进行参数传递: 1.无参数跳转(path和name) eg: <router-link to= ...
vue底部跳转_Vue中底部tabBar切换及跳转
tabBar.vue文件,写法如下: {{item.title}} tabBar.vue 中 js export default { name: "Tabbar", data(){ ...
vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw
文章目录问题描述解决方法问题描述传参时,router.push中布尔值变量会给出一个错误提示 setup(){const router = useRouter();/** 查看已办任务的流程记 ...
vue 跳转页面带对象_vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法 1:router-link跳转点击跳转2 点击跳转1 点击跳转3 2:this.$router.push() 点击跳转4 export default{ name:'t ...
React 小案例路由跳转
在上篇的基础上做路由跳转:上篇安装路由及代码: 安装:cnpm i -S react-router-dom 1.在pages里创建四个跳转页面 2.在src文件夹下创建router.js,route ...
路由跳转后需要两次调用goback才能正常返回
问题描述 react中使用router.push("/createForm")进行路由跳转,表单创建完成后,使用router.goBack()返回页面. 创建页面可以正常返回列表页 ...
vue中的路由跳转和传参
一:注意:在 Vue 实例中,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push("路由地址")来跳转到目标路由页面: 想要导航到不同的 ...

androidstuio实现页面跳转_vue-router 基础：4类路由跳转示例

前言

普通跳转

replace 跳转

重定向

“前进/后退” 跳转

总结

androidstuio实现页面跳转_vue-router 基础：4类路由跳转示例相关推荐

最新文章

热门文章