vue获取路由历史_vue学习之路-vueRouter

最新推荐文章于 2024-04-25 14:19:37 发布
最新推荐文章于 2024-04-25 14:19:37 发布
阅读量1w 收藏 2
点赞数
文章标签： vue获取路由历史
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_27076351/article/details/113709328
版权
学习vueRouter的思路： 首先wiki一下路由是什么，看看基础概念，然后找一些不懂的名词学习然后使用最基础的html实现一下路由最后再看vue router的官方文档，学习使用方法目录路由是什么、三种路由-hash三种路由-history三种路由-memoryvueRouter的使用方法路由是什么从百度百科中了解到，路由是一个分发请求的对象路由器，是一种硬件设备，我们不需要了解路由表，这个我...
摘要由CSDN通过智能技术生成

0ac52600e38a1bd48b3148b695d00e59.png

学习vueRouter的思路： 首先wiki一下路由是什么，看看基础概念，然后找一些不懂的名词学习

然后使用最基础的html实现一下路由

最后再看vue router的官方文档，学习使用方法

目录

  1. 路由是什么、
  2. 三种路由-hash
  3. 三种路由-history
  4. 三种路由-memory
  5. vueRouter的使用方法

路由是什么

021bd1325f98991dddcd13a7977513a9.png

从百度百科中了解到，路由是一个分发请求的对象

路由器，是一种硬件设备，我们不需要了解

路由表，这个我们需要了解一下

了解到了路由的概念，我们将这个概念用到网页里面吧

三种路由-hash

5905741e605386d55c45f9359d8977c2.png

假设我们有一个网址，使用#+id的形式可以进行路由的跳转

那我们有这样的html结构，四个div分别是路由的跳转对象，div404是用户输入不合法路由时候要渲染的对象

<body>
    <a href="#1">go to 1</a>
    <a href="#2">go to 2</a>
    <a href="#3">go to 3</a>
    <a href="#4">go to 4</a>
    <div id="app"></div>
    <div id="div1" style="display: none;">1</div>
    <div id="div2" style="display: none;">2</div>
    <div id="div3" style="display: none;">3</div>
    <div id="div4" style="display: none;">4</div>
    <div id="div404" style="display: none;">你要找的内容被狗吃了</div>
    <script src="src/index.js"></script>
  </body>

实现hash路由

  • 首先我们通过浏览器自带的api：window.location.hash获取到当前路径，
  • 然后我们通过路径去获取对应的div
  • 然后我们将这个div放到页面中，
最低0.47元/天 解锁文章
默认关系
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-router小结
军火库
10-07 2159
Vue-router之前就是学过了，也是会基本的使用，但是感觉太久没有怎么用了不熟练了，有些细节也是忘记了。* 前几天用了，主要是用方法和,然后再router的index.js里面有些路由有些地方也是没有写好。只是能够简单地用，有些做法没有考虑清楚。今天有机会重新学习一下，就是要好好捡起之前的记忆。学习的知识如下:在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如： 普通网页中点击链接，vue 项目中点击都属于声明式导航* 在浏览器中，调用API方法实现导航的方式，叫做编程式导航。
vue3 - 34.router.4 - 历史记录
qq_34111842的博客
11-14 1493
如果不想让路由拥有历史记录（前后跳转）我们只需要在 RouterLink 标签里新增 replace 即可：
【随手小记】vue-router 路由跳转与History堆栈管理
最新发布
qq_35227244的博客
04-25 466
学无止境，记录一下开发过程中，使用vue-router时遇到的路由跳转问题。
vue获取上一个页面路由地址
热门推荐
铁锤妹妹的博客
05-03 2万+
项目需求是需要在当前页面获取上一个路由地址，并根据不同地址进行请求不同接口和页面样式调整的操作。记录一下： 需要用到vue-router的beforeRouterEnter钩子 其实也就是一个路由守卫 <script> export default { data() { return { fromPath: "", }; }, beforeRouteEnter (to, from, next) { next(vm => { cons
vue中如何返回历史路由_Vuerouter(路由)
weixin_39884492的博客
11-21 2747
Vue-router(路由)01一、什么是路由？说起路由你想起了什么？路由器，那路由器是用来做什么的，你有没有想过？- 路由时决定数据包从来源到目的地的路径；- 将输入端的数据转移到合映射表适的输出端；- 路由中最重要的概念就是路由表：路由表的本质就是一个映射表，决定了数据包的指向02二、后端路由1. 早期的网站开发整个HTML页面是由服务器来渲染的。服务器将渲染好的对应的HTML页面返...
vue记录路由历史+el-scrollbar，实现路由历史标签化
一只程序猿
10-09 2551
tag点击事件，调用方法计算scrollbr宽度，计算tag宽度，计算tag距离left（左边）多少px。tag宽度+距离右边再加20px左右，如果大于scrollbr宽度，证明tag所在位置已经到了最右边，实现点击tag之后scrollbr跟随滚动。4、把scrollbar和tag封装成组件，通过点击tag，获取tag位置，并计算scrollbar和tag宽度，实现根据tag位置，scrollbar跟随滚动。初始化数据渲染完成之后，通过当前路由获取下标，实现初始化计算。拦截，每次路由记录到缓存。
第十二章：vue路由进阶使用
张晨光老师的播客
06-15 636
路由：本质：一组对应关系 路径===》组件配置路由规则 routes name:‘命名路由’ path:‘路径’ component=()=>import 一级路由 /嵌套路由：children:[] 不用加/访问二级路由时，需要带上一级路由动态路由：/:name 占位符​ 参数：1.路由参数 2.查询参数 query:{} params:{}重定向 redirect简介： 在之前的原生js中 我们可以通过一些方式去控制网页跳转的历史记录，在vue中我们同样也可以对页面渲染组件
【Vue-Router】历史记录
小秀的博客
08-13 888
consttoPagepathstring=>// 同样，replace 不保存历史记录replace
vue学习之Vue-Router用法实例分析
11-28
本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考，具体如下： Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击<router>它可以在<router>中将相应的组件渲染出来。 1、...
vue.news_run_vue-router_elemntUI_vue_
09-30
Vue Router 是Vue.js官方的路由管理器，它让我们能够实现单页面应用(SPA)中的页面导航。在项目中，`npm install`命令被用来安装包括Vue Router在内的所有依赖。Vue Router通过定义路由规则，使我们能够根据URL动态...
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
Vue路由跳转问题记录详解
08-30
本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
Vue.js框架入门之vue-router路由的基本使用
01-08
现在来续写第六期——Vue Router路由管理器 一、什么是路由 1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2、前端路由：对于单页面应用程序来说，主要通过URL中...
vue实现用户获取浏览记录功能
Hoodps的专栏
09-25 6388
在路由配置文件设置一个属性用来判断当前路由是否需要记录，如要记录当前路由设置为ture memoryRouter: false //是否记忆当前路由为常用工具 { path: '/helloWorld', name: 'HelloWorld', component: HelloWorld, meta: { ...
Vue获取上个路由
Silence_Sep的博客
10-31 3429
使用钩子函数beforeRouteEnter beforeRouteEnter(to, from, next) { console.log('beforeRouteEnter第一个参数to',to); console.log('beforeRouteEnter第二个参数from',from); console.log('beforeRouteEnter第三个参数next'...
js 查看上级路由历史、移动端返回页面刷新
weixin_45727786的博客
06-20 2195
js查看链接历史、路由历史，移动端返回后页面刷新
vue3中获取上一个路由地址
weixin_44282046的博客
07-13 2447
【代码】vue3中获取上一个路由地址。
vue-router获取上一页面的url信息
lvlemo的博客
11-20 2万+
今天在实现一个功能的时候，遇到一个问题，使用vue-router获取上一页面的url信息，我尝试了多种方式， 发现使用vue-router的beforeRouterEnter钩子实现这个功能最为方便，现在将我的实现代码总结如下: beforeRouteEnter (to, from, next) { console.log(to) console.log(fr
vue-router深度解析：构建6个示例带你掌握路由切换
接下来，我们创建一个新的VueRouter实例，这是管理所有路由的核心对象。 3. **映射路由** 使用`router.map()`方法将URL路径与对应的组件进行映射。在这里，我们把'/home'映射到Home组件，'/about'映射到About组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值