首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在页面刷新或单击链接后,vue路由器最后一个路由不会呈现

在页面刷新或单击链接后,Vue路由器最后一个路由不会呈现的原因是因为在Vue路由器中,路由的切换是通过浏览器的History API来实现的。当页面刷新或单击链接时,浏览器会发送一个新的请求,导致页面重新加载,此时Vue路由器的状态会丢失,最后一个路由也无法呈现。

为了解决这个问题,可以使用Vue路由器提供的导航守卫功能来处理。导航守卫可以在路由切换之前或之后执行一些逻辑操作。在这种情况下,可以在路由切换之前检查是否存在最后一个路由,并在刷新或点击链接时将其保存到浏览器的本地存储中。然后,在页面重新加载后,可以在Vue路由器初始化时检查本地存储中是否存在最后一个路由,并将其还原到路由器中。

以下是一个示例代码:

代码语言:txt
复制
// 在路由器初始化之前检查本地存储中是否存在最后一个路由
const lastRoute = localStorage.getItem('lastRoute');
const router = new VueRouter({
  routes: [
    // 路由配置
  ]
});

// 导航守卫,在路由切换之前保存最后一个路由到本地存储
router.beforeEach((to, from, next) => {
  localStorage.setItem('lastRoute', from.path);
  next();
});

// 在路由器初始化时检查本地存储中是否存在最后一个路由,并还原到路由器中
router.beforeResolve((to, from, next) => {
  if (lastRoute) {
    router.replace(lastRoute);
    localStorage.removeItem('lastRoute');
  }
  next();
});

// Vue实例化时使用路由器
new Vue({
  router,
  // 其他配置
}).$mount('#app');

通过以上代码,可以实现在页面刷新或单击链接后,Vue路由器最后一个路由仍然可以呈现的效果。当页面重新加载时,会自动还原到最后一个路由。

对于Vue路由器的更多详细信息和使用方法,可以参考腾讯云的相关产品文档:Vue Router

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue中实现路由跳转传参

index.js文件中,不要忘记导入与路由字典对应的各个页面组件以及vue-router ,并且最后要加一句导出路由对象的代码:export default routervue脚手架项目结构,如下:vue...关于它的详细信息请看官方文档:API 参考 | Vue Router这个组件接受以下属性参数,在这里我们说一说使用中要注意的一些问题:replace添加这个属性的路由导航不会留下...id=1,刷新页面参数id还在,会一直保留,也就是说,query传参刷新页面可以保存。另外,非重要性的可以这样传, 密码之类等重要数据还是要使用params,这样数据安全。...params类似post,跳转之后页面 url后面不会拼接参数,也就是说地址栏不显示参数名称id,但是有参数的值,如果刷新页面id会消失,也就是说,params传参刷新不会保存(除非在路由规则里配置对应参数...项目中跳转到外部链接方法项目文件中,如果是vue页面中的内部跳转,js中用this.

13110

如何制作自己的原生 JavaScript 路由

每当在浏览器的地址栏中输入新的 URL,但我们不想刷新页面时,就会发生这种情况,我们只是想通过加载新内容来刷新视图。 你可以选择将路由存储 routes[] 数组中。...(第一次是我们单击按钮时。) 但是由于该事件带有单击的 id,因此单击 Back Forward 时很容易刷新视图并重新加载内容。...我们在这里没有使用 React Vue,因此我的源代码中 load_content 将负责直接在 DOM 中更新视图。此区域可能填充了你的 API 加载的某些内容。...当你第一次 PWA 中加载此路由时,必须确保如果直接在地址栏中输入/page/home时,它可以工作。 到目前为止,我们仅从前端更改了路由器地址。...假定每次你导航到出现在路由按钮上的 URL 时,实际上都会从服务器单独加载该 URL。 因此你有责任确保/page/about 将路由器页面的加载到应用程序的根视图中。

3.8K20
  • Vue-Router学习笔记,持续记录

    单页应用不仅仅是页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。...后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。...(router) app.mount('#app') 基础知识 Vue+Vue Router主要用于单页面应用创建;vue-router.js会暴露一个VueRouter构造方法,通过传入一个路由规则配置对象创建路由器...单页面应用下,用户点击刷新 history模式下,路由变化会改变当前的URL,正常的浏览器环境下,用户刷新时,请求的链接仍然是最开始请求的入口链接。但是企业微信的浏览器内,则是用改变链接刷新。...参数路由参数变化进行切换的时候,由于页面路由是一样的,只是最后一个参数不同,不会触发页面的数据请求。

    9.2K40

    AngularDart 4.0 高级-路由概述 顶

    本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。 概观 浏览器是一种熟悉的应用程序导航模型: 地址栏中输入一个URL,然后浏览器导航到相应的页面。...它可以将可选参数传递给支持视图组件,以帮助确定要呈现的具体内容。您可以将路由器绑定到页面上的链接,并在用户单击链接时导航到适当的应用程序视图。...路由器插座 当此应用的浏览器URL成为/#/heroes时,路由器将该URL与名为Heroes的RouteDefinition匹配,并在放置宿主视图HTML中的RouterOutlet显示HeroesComponent...现在点击危机中心链接查看正在进行的危机列表。 ? 选择危机,应用程序会将您带入危机编辑屏幕。 危机详情显示列表下方的同一页面上的子视图中。 改变危机的名称。 请注意危机列表中的相应名称不会更改。...点击浏览器后退按钮“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您的更改,单击“Cancel”并继续编辑。 这种行为的后面是路由的routerCanDeactivate挂钩。

    6.1K20

    AngularDart4.0 英雄之旅-教程-07路由

    路由和导航页面阅读有关默认路由和重定向的更多信息。 将导航添加到dashboard  模板上添加dashboard 导航链接heroes链接上方。...你已经完成了应用程序的路由。 您没有向模板添加英雄详情链接,因为用户单击导航链接不是为了查看特定的英雄; 而是点击一个英雄的名字,不管名字是显示仪表板还是英雄列表中。...要在其他地方导航,用户可以单击AppComponent中的两个链接之一,单击浏览器的后退按钮。...当用户从列表中选择一个英雄时,他们不会进入详细页面。 相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整的详细信息页面。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

    17.5K30

    Vue-Router

    功能包括: 嵌套路线/视图映射 模块化,基于组件的路由器配置 路由参数,查询,通配符 查看由Vue.js过渡系统提供动力的过渡效果 细粒度的导航控制 与自动活动CSS类的链接 HTML5历史记录模式哈希模式...,IE9中具有自动备用 可自定义的滚动行为 Vue-router构建单应用界面的核心 改变URL,但是页面不进行整体的刷新。...我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新 方法二:history接口 history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面....四 .vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. vue-router的单页面应用中, 页面的路径的改变就是组件的切换. 五....路由切换时, 切换的是挂载的组件, 其他内容不会发生改变.

    2.3K10

    什么是IP冲突?以及如何解决?

    大多数情况下,现代家庭网络中,IP 冲突很少见。这是因为 DHCP(动态主机配置协议),一个路由器用来分发 IP 地址的系统。...除非你的路由器出现故障,否则两台设备永远不应在此系统下获得相同的 IP 地址。你的路由器知道哪些 IP 地址已经使用中,并且不会两次提供它们。...从左侧选择你正在使用的连接类型,然后单击Advanced。 结果页面上,选择TCP/IP选项卡。如果配置 IPv4框设置为手动,请将其更改为使用 DHCP。...要在 Mac 上刷新你当前的 IP,请单击页面右侧显示的“续订 DHCP 租约”按钮。...更新你的路由器固件 有故障的路由器可能会导致 IP 冲突更频繁地发生,并且不会发出警告。如果在执行上述故障排除仍然出现 IP 地址错误,则应更新路由器的固件。 具体步骤也取决于你拥有的路由器

    5.7K30

    路由器的两种工作模式:hash模式和history模式

    文章目录 hash模式的路由器 history模式的路由器 history模式下的404问题及其解决方法 打包前端项目 express构建小型服务器 前端打包文件部署至服务器 解决404报错问题 url...hash是和浏览器对话的,和服务器没有关系,hash值不会作为url的一部分发送给服务器。 路由器vue-router)有两种工作模式:hash模式和history模式,默认是hash模式。...hash模式的路由器 路由器默认的工作模式是hash模式。...放好,访问localhost:3000。 可以看到,history模式下的dist部署到服务器路由切换访问/home/about时,没有问题。...但在/home时刷新页面,显示无法找到,报404。 hash模式下的dist部署到服务器,就不会出现以上问题。 解决404报错问题 刷新时报404的问题,需要后端程序员的帮助。

    1.2K10

    8分钟为你详解React、Angular、Vue三大框架

    5、路由页面应用程序(SPA)的一个传统缺点是无法分享到特定网页中的确切 "子 "页面链接。...Vue提供了一个界面,可以根据当前的URL路径来改变页面上显示的内容 – 可以有多种方式(无论是通过电子邮件链接刷新还是页面链接)。...此外,当某些浏览器事件发生在按钮链接上时,使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。...它支持将嵌套路由映射到嵌套组件,并提供精细化的过渡控制。添加了vue-router,组件只需映射到它们所属的路由,父/根路由必须指明子路由的渲染位置。 ?...8、官方程序库 Vue Router - Vue.js的官方路由器 Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。

    22.1K20

    Vue Router前端路由

    单页应用程序中,不同视图(组件的模板)的内容都是一个页面中渲染,页面间的跳转都是浏览器端完成,这就需要用到前端路由Vue.js中,可以使用官方的路由管理器Vue Router。...支持vue2.0的Vue Router的版本名是vue-router。 2、HTML页面使用路由 前端路由的配置有固定的步骤。...const app=Vue.createApp({}) //使用路由器实例,从而让整个应用都具有路由功能 app.use(router) app.mount... 任意单击某个链接之后的渲染结果: 创建router实例时,为选项history指定的是VueRouter.createWebHashHistory(),也就是...hash模式,即使用URL的hash(即URL中的锚部分,从"#"开始的部分)模拟完整的URL,以便在URL更改时不会重新加载页面

    47130

    懂个锤子Vue VueRouter路由深入浅出

    ,即前端路由技术,它处理的是用户:单页面应用程序SPA中的导航;Vue Router允许开发者定义不同的URL路径,并将这些路径与特定的Vue组件关联起来:当用户导航到一个新的URL时,不是加载整个新页面...创建路由器模块: 项目的src目录下创建一个router文件夹、文件夹内创建一个index.js文件,这是路由器的配置中心;2.导入VueVue Router: src/router/index.js...$mount('#app');Vue路由的进阶使用⏫:声明式导航-导航链接声明式导航: 它允许开发者通过模板中使用组件来定义导航链接,从而实现页面间的切换;<router-link...Vue路由—重定向Vue Router的路由重定向是一种机制,它允许在用户尝试访问某个路径时自动将他们导航到另一个路径:可以用来简化URL结构、实现默认页面处理不存在的页面等场景:Vue Router...;缺点:需要服务器端的配合,确保直接访问刷新非根URL时;//事先定义好一个404页面//路由配置文件中引入页面组件import NotFound from '@/views/NotFound';//

    6810

    包学会之浅入浅出Vue.js:开学篇

    : { App }/*告知当前页面想使用App这个组件*/ }) 单页面组件 好了,现在打开我们的App.vue文件,Vue中,官网叫它做组件,单页面的意思是结构,样式,逻辑代码都写在同一个文件中,当我们引入这个文件...现在回到我们刚才打开的App.vue文件中看这行代码 这句代码页面中放入一个路由视图容器,当我们访问http://localhost:8080/...注意到Hello,About等都是页面(也可以是组件),接着注册路由器,然后开始配置路由。...路由的配置应该一目了然,给不同的path分配不同的页面组件,页面和组件其实是一样的概念),name参数不重要只是用来做识别用的。...Vue时候的简单介绍,之前就说过学习Vue能掌握组件和路由的基本概念之后,对于我们后续了解他的工作机制有着很大的帮助,本篇章我们只是简单介绍了单页面组件,在下一篇文章中,我们将通过一个实战的项目,来充分了解组件化

    27.1K9023

    SPA应用路由器如何工作?

    SPA(single page application)-单页面应用有两个特点,一是路由控制,二是模板渲染。通过路由器,可以不reload页面的情况下,实现页面部分刷新。...当改变锚点时,页面的主体部分会切换内容,但是,整个页面不会被重新刷新。 那么,如何监听锚点变化?...,并没有刷新,没有激活window.onload事件; 如此可见,利用HTML5 history API,可以实现“切换URL地址但页面不会刷新”的功能。...它的优点是,路由器多个URL间跳转,可以完全支持浏览器SEO(切换Hash不能改变真正的URL,多次路由切换,搜索引擎爬虫会认为一直访问同一个页面,无法SEO)。...缺点是,切换路由的http://www.somesite.com/subPage1.html 并不是一个真正的资源地址,想象一下,这个时候点击浏览器刷新按钮,浏览器必然会发起对subPage1.html

    1.6K40

    通过 Laravel 创建一个 Vue页面应用(五)

    你也可以使用诸如 portal-vue 之类的插件或者布局中的一个组件来临时闪烁消息(或者消息弹出,使用强制关闭按钮关闭),显示一个操作是否已经成功(或者失败),从而向用户提供反馈。... 因为在后端的Laravel程序中存在一个万能路由, 这意味着前端也需要这么一个万能路由,当访问路径与已经定义的路由不匹配时以一个404页面作为响应。...*'); 如果你数入一个无效的 URL 比如 /does-not-exist,你会看到像下面的一堆东西: Vue路由器触发了会将浏览器重定向到 /404 的通配符路由规则。...接下来是什么 我们学习了如何通过 Vue 路由器在前端删除用户并对成功删除做出响应.。...我们通过主 app.js 文件中用vue.use(vue router) 注册vue路由器,引入了通过 this.$router 属性的编程导航。

    4.4K20

    11 个高级 Vue 编码技巧

    我最近在一个项目中使用它来生成动态侧边栏导航组件。我路由器中的某些路由上设置了一个 showInSidebar 元数据属性,我想隐藏在侧边栏中。...我还能够自动生成所有侧边栏链接,而无需对每个链接进行编码。以下是我设置路由器路由的方法: ?...有了这个,如果路由器链接的目的地与当前路由匹配,Vue 会自动设置一个活动类。...5、路线更改时滚动到顶部 当更改路线ni时,Vue 会保持页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望的顶部。...只需 app.js 文件中添加一个 watch: 每次路由更改触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo

    2.6K30

    10个关于 Vue 的高级开发技巧

    我最近在一个项目中使用它来生成动态侧边栏导航组件。我路由器中的某些路由上设置了一个 showInSidebar 元数据属性,我想隐藏在侧边栏中。...我还能够自动生成所有侧边栏链接,而无需对每个链接进行编码。 以下是我设置路由器路由的方法: ?...有了这个,如果路由器链接的目的地与当前路由匹配,Vue 会自动设置一个活动类。...5、路线更改时滚动到顶部 当更改路线ni时,Vue 会保持页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望的顶部。...只需 app.js 文件中添加一个 watch: 每次路由更改触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo

    6.1K10

    Blazor 中的路由路由模板

    客户端上,路由器参与多种情况,最常见的情况是用户单击链接、表单上的提交按钮下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径的整个过程。...最后的结果就是,Blazor 路由器目前仅提供作为客户端路由器的基本功能。例如,它不具备检查路由上的授权和创建在位置更改时执行视图转换的链接的功能。...与 Angular 路由器不同,它在获取路由参数无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到的。...但是,当定位标记用于呈现菜单导航栏时,可能需要一些额外的工作来调整 CSS 样式以反映链接的状态。 内置的 Blazor NavLink 组件可以用于任何需要定位点元素的地方,尤其是菜单中。...路由谜题的另一个重要缺失部分:完全自定义决定目标 URL 的路由器逻辑的功能。此功能有助于开发人员控制无效链接请求。虽然 Blazor 路由器还远未完成,但仍在继续向成熟的传送框架发展。

    8.4K21

    11 个高级 Vue 编码技巧

    我最近在一个项目中使用它来生成动态侧边栏导航组件。我路由器中的某些路由上设置了一个 showInSidebar 元数据属性,我想隐藏在侧边栏中。...我还能够自动生成所有侧边栏链接,而无需对每个链接进行编码。以下是我设置路由器路由的方法: ?...有了这个,如果路由器链接的目的地与当前路由匹配,Vue 会自动设置一个活动类。...5、路线更改时滚动到顶部 当更改路线ni时,Vue 会保持页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望的顶部。...只需 app.js 文件中添加一个 watch: 每次路由更改触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo

    2.5K20

    10个关于 Vue 的高级开发技巧

    我已经测试了多种方法和包来访问fill属性,而不会炸毁我的模板,结果证明,添加hoveractive CSS 状态以更改 fill SVG 中的一个多个填充属性的最佳方法,实际上最有效的显而易见的方法...我最近在一个项目中使用它来生成动态侧边栏导航组件。我路由器中的某些路由上设置了一个 showInSidebar 元数据属性,我想隐藏在侧边栏中。...我的 SideNavbar 组件模板中: 你可能已经注意到了exact-active-class代码: 有了这个,如果路由器链接的目的地与当前路由匹配,Vue 会自动设置一个活动类。...5、路线更改时滚动到顶部 当更改路线ni时,Vue 会保持页面上的当前位置。这有时很有用,但主要是麻烦。如果向下滚动一个长列表,然后转到另一个页面,滚动条将位于新页面的底部,而不是期望的顶部。...只需 app.js 文件中添加一个 watch: 每次路由更改触发滚动到顶部: // In App.vue watch: { $route() { window.scrollTo

    6K20

    # Vue-router 原理解析

    /vue-analysis/v2/vue-router/ 插件机制:实现一个 install 方法,接受一个 Vue 实例。...# 两种模式:hash 模式和 history 模式 hash 模式 url 带#的字符,请求时候不会被包含在 http 请求中,每次改变 hash 也不会加载页面 hash 改变会触发 hashchange...url,渲染相对应的组件 兼容到 IE10 无惧前进和后退,就怕 F5 刷新,可能会出现 404,所以需要后端配合,使用 Koa 的中间件 connect-history-api-fallback——参考链接...通过 mixin 的方式, beforeCreate 和 destroy 中将逻辑混入一个组件上 监听路由改变使用的是 Vue 的双向绑定 然后给 Vue 原型上设置router和route两个属性...$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。 this.

    29731
    领券