开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue-router为什么当我刷新一个包含id的URL的页面时，我失去了所有的页面设计

vue-router是Vue.js官方的路由管理器，用于实现前端路由的功能。当刷新一个包含id的URL的页面时，可能会导致页面设计丢失的问题，原因如下：

前端路由的特点：前端路由是基于浏览器的History API或Hash模式实现的，它通过修改URL的hash或使用HTML5的pushState方法来改变URL，从而实现页面的切换和导航，而不需要向服务器发送请求。但是，当刷新页面时，浏览器会向服务器发送请求，服务器会根据URL返回相应的页面内容，这时候前端路由的状态就会丢失。
页面设计的保存：在刷新页面时，前端路由的状态丢失，包括页面设计、数据等都会重新加载。如果没有进行相应的处理，页面设计就会丢失。

解决这个问题的方法有以下几种：

后端支持：可以通过后端的配置来解决页面设计丢失的问题。在后端服务器上配置一个通配符路由，将所有的URL请求都指向前端的入口文件，确保在刷新页面时，前端路由能够正确地加载并渲染页面设计。
使用服务端渲染（SSR）：服务端渲染是将页面的初始状态在服务器端进行渲染，然后将渲染好的页面返回给浏览器。这样，在刷新页面时，服务器会重新渲染页面，并保持页面设计的状态。
使用本地存储：可以使用浏览器的本地存储（如localStorage或sessionStorage）来保存页面设计的状态。在页面加载时，先从本地存储中读取状态，然后再进行页面的渲染。
使用路由参数：可以将页面设计相关的信息通过路由参数传递，这样在刷新页面时，可以通过路由参数获取到相应的信息，并进行页面的还原。

关于vue-router的更多信息和使用方法，可以参考腾讯云的相关产品和文档：

腾讯云产品：云服务器（CVM）- https://cloud.tencent.com/product/cvm
腾讯云文档：Vue.js开发指南- https://cloud.tencent.com/document/product/248/45099

相关搜索:为什么每次我刷新页面时，都会在数据库中发布一个新的会话？在angular 4项目中，当我从url中删除#时。删除#后，我面临与页面刷新相关的问题当我从另一个链接页面单击后退时，我的页面设计会更改颜色/大小当我刷新angularjs上的浏览器时，为什么我得到的页面找不到？当我刷新页面时，为什么我的React useEffect没有再次加载？当我刷新页面时，我按下的最后一个按钮是再次按下。ASP.NET 当我在url斜杠中有参数时，我如何重定向到一个特殊的页面？当我在我的vue应用程序的url中更改:id参数时，为什么当我按enter时页面不能重新加载？当我试图在github页面上部署我的angular项目时，突然出现了一个错误: Failed to get remote.origin.url numpy比较的工作原理

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue页面刷新_vue强制重置组件

vue页面刷新首先我们都知道vue属于单页面应用，默认境况下是不会触发刷新页面操作的，所以这个时候就需要我们通过事件来触发reload()来达到刷新操作接下来我就为大家介绍三种刷新页面的方法 1...，从服务器端获取最新的页面，相当于页面f5刷新 wiindow.location.replace(URL) 该URL参数未你所要跳转的地址，如果想实现当前页面刷新，你可以这样做 wiindow.location.replace...利用provide/inject组合方式是我目前觉得最好用的方法，下面我们就来详细介绍其用法首先在我们的app.vue页面中设置这里我来说明一下，我们的主体思路，我想可以通过视图的显隐来达到我们想要的刷新，所以我们就在这里声明了一个方法，先让视图消失随后又出现，这种方法有什么好处呢，你可以刷新局部页面，也可以刷新全部页面...可以看到，当我们点击刷新的时候我们的页面就会触发一次事件，刷新一次，可这并不是我们想要的，我们想要的是当一进入页面，就要触发一次刷新，那干脆我们执行这个事件的函数放在mounted里面好了，话不多说直接开始

2.3K1 0

vue-router的超神之路

(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。...router路由规则所属的路由器（以及其所属的组件）。 matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 name当前路径的名字，如果没有使用具名路径，则名字为空。...$http.get('http://test.m.com/detail', { infoId }) } 当我们通过列表再次进入详情页时，虽然infoId已经变了infoId=234567，但是页面并没有改变...(); } } } } 这样还会带来下面的问题，就是物理键返回的时候也会刷新页面，下面是对物理键返回的处理如何检测物理键返回 为什么要检测物理返回键？...这些是我去年做项目时做的一些路由上的优化，我想这些优化对于有些同学应该能够有点帮助。所以就总结了下来，提供大家参考。后续还有两节，应该属于工程化方面的优化了，准备好好写写下篇再发。

1.5K3 0

Vue前端面试题

劣势： • history 在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。...因此，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面 • hash 模式下，仅 # 之前的内容包含在 http 请求中，...初始化的时候，我绑定了一个 name 属性，它在一个 div 里面做了展示；当我在 div 里面添加 name 展示的时候，其实在模板编译的时候，获取了一下 name 属性；因为前面有提到，我给当前的属性绑定了...Object.defineProperty ，所以在获取的时候，我会调用到 get 方法；在这之前，我有实例化一个 dep 队列，把每次获取 name 属性的地方，做一个 push ；当我接下来要做数据修改的时候...因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。

6714 0

通过 Laravel 创建一个 Vue 单页面应用（一）

hash 模式使用 URL hash 来模拟一个完整的 URL，这样就可以使 URL 变化时页面却无需重新加载。...安装首先我们会创建一个 Laravel 项目，然后再安装 Vue 的 NPM 路由包： laravel new vue-router cd vue-router # 当使用 Valet 时，建立项目链接...$route 来调用 VueRouter 构造器包含一个路由数组，在这个数组中定义路由的路径，名称（类似于 Laravel 的命名路由）和这个路径对应的页面组件。...~#app 元素，其中包含了将要呈现的 App 组件，以及根据 URL 所呈现的其他组件。...watch 当我们在浏览器中输入对应 URL 时，将会看到如下页面：下一步我们已经建立起了一个使用 Laravel 作为 API 层的 Vue SPA 应用的骨架。

4.2K2 0

vue-router的hash和history模式的区别

为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。...（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。...SPA 虽然在浏览器里游刃有余，但真要通过 URL 向后端发起 HTTP 请求时，两者的差异就来了。尤其在用户手动输入 URL 后回车，或者刷新（重启）浏览器的时候。...history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。...Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html

1.5K2 0

Vue笔记(10) vue-router

学习内容 ⊙ 前端路由和后端路由 ⊙ URL的hash ⊙ 认识vue-router ⊙ vue-router的使用 ⊙ router-link ⊙ 动态路由 ⊙ 路由懒加载 ⊙ 路由嵌套‍...前端路由和后端路由后端路由: 前后端分离: 前端路由: 本文由“壹伴编辑器”提供技术支持 URL的hash 一般来说,如果我们直接在URL地址栏中修改网址,整个页面都会刷新...认识vue-router 本文由“壹伴编辑器”提供技术支持 vue-router的使用我是使用vue2创建的,脚手架为5.x, vue为2.x, 在创建项目时直接选了安装Vue-router...router-link是默认将内容渲染成a标签的假如我现在将它换一个位置显示出来的就是这样的下面是一点细节问题,就是当我们打开页面时,应该自动打开首页,而不是需要我们手动选择...: 但是这个一般不修改的通过代码跳转网页现在我希望直接放按钮,通过点击跳转到对应的页面本文由“壹伴编辑器”提供技术支持动态路由假如我们在进入到用户的页面时想要在路径中显示用户的

8561 0

17. vue-route详细介绍

前端路由的核心是什么呢? 改变url, 但是页面不进行整体刷新. 二. 前端如何实现页面跳转但是不刷新?...如上图, 我们可以通过location.hash="链接"的方式来修改url,但是并不刷新页面 2. history 除了使用hash,我们还可以使用history来改变实现改变url但不刷新页面的方法...如上图所示: 当我们执行history.pushState({a:1},null,"about");的时候, 浏览器并没有刷新页面(Network没有请求), 但是url链接确实发生了变化 history.replaceState...如上图, 当我们使用history.back()命令的时候, 会回退到上一个页面, 也并没有发生更新....认识路由的懒加载首先为什么需要懒加载, 原因是, 当我们打包的时候, 会将所有的js文件,css进行打包, 打包到一个文件中, 然后在index.html页面中引入这些js,css文件.我们来看一下效果

5.5K2 0

vue路由mode模式：history与hash的区别

SPA 虽然在浏览器里游刃有余，但真要通过 URL 向后端发起 HTTP 请求时，两者的差异就来了。尤其在用户手动输入 URL 后回车，或者刷新（重启）浏览器的时候。...history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。...Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html...在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404...为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

4.6K1 0

Vue Router详细教程

但是，一个网站这么多页面服务器如何处理呢? 一个页面有自己对应的网址，也就是URL。URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理。...这就完成了一个IO操作。上面的这种操作，就是后端路由。当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户顿。...改变URL，但是页面不进行整体的刷新。如何实现呢？ 2.前端路由的规则 2.1URL的hash URL的hash，URL的hash也就是锚点(#)，本质上是改变window.kk属性。...我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新 2.2HTML5的history模式：pushState history接口是HTML5新增的, 它有五种模式改变URL...而不刷新页面。

3.6K3 0

一文让你彻底搞懂 vue-Router

后端路由： URL 的请求地址与服务器上的资源对应，根据不同的请求地址返回不同的资源。前端路由：在单页面应用中，根据用户触发的事件，改变URL在不刷新页面的前提下，改变显示内容。...1、前端路由实现原理 URL 的 hash 模式改变 hash 值的时候，#是一个位置标识符，可以进行页面内的位置跳转，并不会刷新页面。...URL 的 history 模式 history 模式，有 5 种改变 url 而不刷新页面的方法，分别为： history.pushState() //压入栈 history.replaceState...() // 替换当前url，不能返回上一个页面 history.back() //返回上一个页面 history.go(n) //n的值可以是大于0的，表示向前几个，小于0时，表示向后退几个 history.forward...10.1、全局守卫 1>、使用 router.beforeEach 注册一个全局前置守卫，只要路由变动时，都会经过它。beforeEach 接收的参数是一个函数，包含的参数有三个。

7052 0

前端Vue框架面试题大全

最后一个*能匹配全部，然后重定向到主页面 ] }); history 路由和 hash 路由的区别, 在浏览器有什么影响； hash前端路由，无刷新 history 会去请求接口 vue-router...因此，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面 hash 模式下，仅 # 之前的内容包含在 http 请求中，对后端来说，即使没有对路由做到全面覆盖...时浏览器才会刷新这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错 3.history.replaceState replaceState...，我绑定了一个 name 属性，它在一个 div 里面做了展示；当我在 div 里面添加 name 展示的时候，其实在模板编译的时候，获取了一下 name 属性；因为前面有提到，我给当前的属性绑定了 Object.defineProperty...，所以在获取的时候，我会调用到 get 方法；在这之前，我有实例化一个 dep 队列，把每次获取 name 属性的地方，做一个 push ；当我接下来要做数据修改的时候，比如把 zhangsan

1.9K6 0

Vue之Router（一）

（二）、前后端未分离阶段 1.后端渲染后端渲染：我是高级绘画师，常常做着默默无闻的工作。平常只要是 “服务器”大哥给我的 “URL”设计方案，我都能用我精湛的jsp技术将它们绘画出来。...使用该模式开发出来的项目，最终只有一个index.html页面，如果涉及到多个页面时，需要前端路由的处理，下面讲解它们之间的原理：浏览器：我现在可轻松啦，当用户向我提交URL订单的时候，我只需要向...静态资源服务器：为了提高效率，我也不像以前那么傻，为每一个URL订单开一个工厂来专门生产材料，而是直接用一个工厂生产所有的材料。...1.前因后果当页面的URL发生改变时，就会向服务器发送请求，请求该页面相应的内容，然后页面就会刷新。...1.产生原因当我们进入一个网页的时候，首先引入眼帘的肯定是首页对不对。

8981 0

SpringBoot+Vue（二）ES6模块化、SPA-Vue企业级开发和Vue全家桶

传统的网站我们传统的网站是由很多个独立的页面组成的，当我们点击页面中的 a 标签时，就会向服务器发送一个新的请求，然后下载另一个页面显示，跳转时是页面之间的跳转。...SPA SPA（单页面应用程序），顾名思议，整个网站中只有一个页面，在这个页面中会加载很多个不同的组件，当我们点击按钮时，并不会打开一个新的页面，而是还在当前的页面中切换显示不同的组件。...功能组件我们可以将页面中一些独立的小功能制作成组件，这些组件可以被页面组件引入使用，比如：翻页、时间插件等，功能组件保存在 components 目录中，这些组件不能独立显示，只能被包含在一个页面组件中使用...页面组件和功能组件的关系：（每个页面就是一个页面组件，每个页面中可以包含多个功能组件） 3.7.3.2 页面组件的使用 3.7.3.3 功能组件的使用系统中默认有一个 HelloWorld 组件：...跳转的组件页面获取参数 3.8.3 体验 3.8.3.1 配置路由的时候定义参数我们在定义路由时经常需要为路由添加一些参数，比如当点击一件商品进入商品详情页时需要把商品的ID传到页面中。

7881 0

【无标题】

服务器将渲染好的对应的HTML页面返回给客户端进行展示，但是一个网站包含很多页面，那服务器是怎么处理的呢？...在单页面应用阶段，SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则。那么前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新。...10.2.2.2.2、HTML5的history模式 history接口时HTML5新增的，它有5种模式改变URL而不刷新页面。...还记得我们写过的路由规则吗？我们要加上对应的名字才可以访问，比如说我访问登录组件，就加一个/login。改为/reg后，就会切换到注册组件。...不可以写绝对路径，这样项目上线的时候，这里全部都要改，一点也不灵活。我们可以使用#/login的方式，用#告诉Vue，我这是一个路由的切换。#后面跟上路由名字。

1.2K2 0

Vite 在运行过程中是如何发现新增依赖的？

> 当我们取消注释，即新引入 vue-router 依赖时（之前没有被使用过），会发现页面刷新了，由于页面刷新，count 会被重置。...我这里只是用了一种比较简单的引入依赖方法，实际上这样引入没有任何意义，仅用于演示。这里有几个问题，放到后面解答： 1. 引入 vue-router 之后，发生了什么？ 2. 为什么页面会刷新？...浏览器运行 App.vue 的热更新逻辑（Vue 框架自带热更新逻辑，在编译时加入的），更新页面在我们的例子中，新增了 vue-router 依赖。...Vite 重新编译所有依赖，编译完成后 Vite 会通知页面进行刷新 3. 浏览器刷新页面 4. Vite 此时已经构建好 vue-router，因此能够正常返回内容 为什么构建后需要刷新页面？...后来开发者使用 lodash-es，Vite 需要重新构建构建前后产物发生了变化，那前面已经拉取的产物文件已经失效，这时候只能刷新页面了那么这里我们还剩下最后一个问题：再次注释 vue-router

1K1 0

从源码角度剖析vue-router

url 后，浏览器向服务器请求这个 url 对应的HTML，服务器返回 HTML给前端，前端再展示，然后当需要浏览别的页面时，需要点击 a 标签再向服务器发送一个请求，服务器就会再发给你目标页面的 HTML...这样会暴露一些缺点：每次跳转都向服务器请求，会增加服务器的压力每次跳转都会刷新页面导致跳转过程中会有一瞬间的白屏，用户体验不是非常好由于是服务端渲染，受到 XSS 的攻击可能性也较高在 MVVM...vue-router 插件当我们调用 Vue.use（Router）时会执行插件的注册流程图1： image （删除了部分和入口无关的逻辑）所有的 Vue 插件都会暴露一个 install 方法...路由实例创建路由的映射表图中第四行会执行到 createMatcher 方法，返回一个对象，包含 match 和 addRoutes 这2个方法，这2个方法是 vue-router 中比较重要的函数...3种不同的选择来生成路由 HTML5 路由是相对比较美观的一种路由，和正常的 url 显示没有什么区别，核心依靠 pushState 和 replaceState 来实现不向后端发送请求的路由跳转，但是当用户点击刷新按钮时会存在找不到页面的情况

5453 0

2020vue面试题及答案_人际关系面试题及答案

大家好，又见面了，我是你们的朋友全栈君。...使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。...会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转主要用在单页面应用(SPA) history 模式工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面...其实一共有五种模式可以实现改变URL, 而不刷新页面....基本概念 Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。

8.7K2 0

BuildAdmin05：如何玩转Vue路由动态加载

（可能说的不够专业）在前端中，url中的路径就相当于上面的IP，一个个vue页面就相当于手机、电脑，前端页面根据路径（IP）就能找到对应的页面（手机、电脑）进行渲染。...上面是vue-router官网给出的最基本的用法，router-link就相当于\，to指向的就是url路径path。...如果这样实现的话，就需要调用addRoute(parent, router)，我使用这种方法一直无法实现动态加载，后来就另辟蹊径就直接将路由全都放到一个层级，反正渲染菜单时用的是menuRule的层级关系...路由bug 其实写到这里这里的时候，就遇到一个bug（后面会解决）。我点击了某一个路由，然后刷新浏览器，就会提示无法匹配这个路由，main区域就没有页面显示，然后显示404，并跳转到上一个页面。...这个问题是刷新时，后台路由还没有动态加载导致的，以后有了后台，用api向后台请求路由信息就能解决这个问题。在后面Loading页面的实现时，我加了一条路由就把这个问题解决了，这里就先不纠结这个问题。

5090 0

Week28-脚手架发布模块架构设计和核心流程开发

第一章：周介绍掌握脚手架发布模块的整体架构设计和实现原理掌握前端发布流程，并了解history和hash两种路由模式的区别深入理解vue-router原理关键词前端发布前端路由 vue-router...配置) 我们没有定义router-link和router-view，为什么代码里能直接使用(涉及vue-router初始化流程和Vue插件) 浏览器如何实现URL变化但页面不刷新(涉及vue-router...模式的区别语法结构不同：hash添加#意味着一个辅助说明，#后面参数发送改变后并不会加载资源，history模式只要路径改变就会重新请求资源，但是如果页面刷新的话 hash和history都是会重新加载资源的...//historyNavigation提供了一些方法：location/push/replace/state // 该方法的实现浏览器URL变化但页面不刷新（push），核心是使用了浏览器对象模型...变化但页面不刷新在控制台直接输入 history.pushState(null,null,‘/Order’/),会发现浏览器窗口中地址发生了改变，但页面未刷新。

1.1K4 0

Vue 全家桶学习笔记：Vue-router

再后来出现了 SPA 单页面应用的概念，实际上它只有一个页面，但给我们的体验是多页面之间的切换。...hash 模式：url 中带有 hash（#），hash 的改变并不会触发刷新或者请求，同时每一次改变 hash 后的部分，都会在浏览器的访问历史中增加一个记录，这使得我们可以来回切换；而要监听切换可以依靠...onhashchange 事件； history 模式：html5 提供了 window.history 的 API，url 的改变同样不会触发页面刷新，并且由于历史记录是在 history 栈压入或弹出的...我的用户名是：{{id}} export default{ computed:{ id(){ return this....在单页应用中，如果没有应用懒加载，运用webpack 打包后的文件将会异常的大，导致进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力

5833 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭