vue-router history地址改变页面没变

vue-router 在微信浏览器中操作history URl未改变的解决方案

在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/b页面后,页面正常,但是复制浏览器的地址会发现其地址仍为/a;选择在浏览器打开发现也是显示的/a的页面.这应该是微信浏览器那边的问题,微信浏览器只会记住你第一次进来的地址. 微信浏览器不会自动添加 # 在pc端或者手机浏览器开发的时候输入localhost:8080,浏览器会自动跳转到localh

新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题

摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Router,HTML5 History 模式,因为history模式刷新页面会出现404>,作者: DevFeng . vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路

vue & $router & History API

vue & $router gotoTemplateManage(e) { e.preventDefault(); this.$router.push({ path: `/operate-tool/select-seat-system/template-manage`, }); // this.$router.replace({ // path: `/operate-tool/select-seat-system`, // }); }, Browser History API https://d

vue路由history模式刷新页面出现404问题

vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中修改方法一: location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } } 方法二:vu

vue router history模式开发ngnix配置

一.前沿现在很多用vue-router开发页面的时候,都习惯使用hash路由莫模式,如:https://xxxx/#/index/share?code=dsfsd.这种模式在做pc端开发时候挺好用的.但是在app或者在微信开发的时候,#后面的内容容易被服务忽略,或者在微信授权和自定义分享的时候都会出现不同的状况,更重要的是,hash模式下,域名容易被封掉. 如果采用history,连接形如:https://xxxx/goods/item/ATG9155629871354100163E11986

vue中数组删除，页面没重新渲染

创建一个组件时,数据类型是数组,在删除这个数组中的数据时,数组中的数据是对的,但页面渲染的数据却不对. 举例:(不一定复现) <ul> <li v-for="(item, index) in peoples" :key="index">{{item.name}} 删除 </li> </ul> <scrip

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:Vue 使用History记录上一页面的数据. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模式的.看看vu

关于vue-router中点击浏览器前进后退地址栏路由变了但是页面没跳转

情景: 在进行正常页面跳转操作后(页面A跳转到页面B),点击浏览器的左上角的‘后退’按钮,点击后,可以看到url地址已经发生了变化(url由页面B变为页面A),hash值也已经是上一页的路由,但是浏览器显示的内容却没有发生变化(依旧是页面B). 没有任何报错(页面A和页面B无任何js错误或者兼容性错误). 若有错误也会导致页面跳转不成功,页面依旧是当前页面,但是控制台会报ERROR. 但是页面按浏览器刷新按钮后,一切又恢复了正常.真的让人很头疼,IE,Chrome,fireFox,Edge都是这

使用ajax和history.pushState无刷新改变页面URL

表现如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如下的问题: 1.可以无刷新

使用ajax和history.pushState无刷新改变页面URL onpopstate（转）

Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).responseText; var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).responseText; 转自:使用ajax和history.pushState无刷新改变页面URLjQuery-Pjax(push

使用ajax和history.pushState无刷新改变页面URL(转)

表现如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如下的问题: 1.可以无刷新

Vue系列之 => Watch监视路由地址改变

第一种方式实现监听 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content-Type" c

深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来越大,文件大的时候会导致打开页面用户体验相对来说会变慢.因此按需加载代码是很有必要的,每次打开某一个页面的时候,只按需加载那个页面的代码,这样的话,项目中其他代码就不会被加载,这样的话,bundle.js文件也不会把所有项目页面文件代码打包进去,文件也不会很大.其他的页面对应的代码第一次都是按需加载

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="周记[学校晚会篇]" /><meta name="description" con

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大的功能呢? 与传统的AJAX的区别虽然ajax可以无刷新改变页面内容,但无法改变页面URL 有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变 history.pushState, history.replaceState pushState是将指定的UR

vue Router——进阶篇

vue Router--基础篇 1.导航守卫正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to,

vue环境搭建及单页面标签切换实例

复习 """ 1.指令: v-once: {{ msg }} v-cloak: 防止页面加载抖动 v-show:绑定的变量为布尔类型 {{ msg }},隐藏时,任然在页面中通过display:none渲染 v-if|v-else-if|v-else: 前分支成立会屏蔽后分支,else分支不需要条件 v-if="showBox

8种Vue中数据更新了但页面没有更新的情况

目录 1.Vue 无法检测实例被创建时不存在于 data 中的属性 2. Vue 无法检测'对象属性'的添加或移除 3.Vue 不能检测利用数组索引直接修改一个数组项 4.Vue 不能监测直接修改数组长度的变化 5.在异步更新执行之前操作 DOM 数据不会变化 6.循环嵌套层级太深,视图不更新? 7.路由参数变化时,页面不更新(数据不更新) 8.使用keep-alive之后数据无法实时更新问题 1.Vue 无法检测实例被创建时不存在于 data 中的属性原因: 由于 Vue 会在初始化实例

Vue项目history模式下微信分享总结

原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下. 技术要点 Vue,history模式常见问题及说明 debug模式下报false 这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项: 是否成功绑定了域名(域名校验文件要能被访问到) 使用最新的js-sdk文件

Vue 2.0 + Vue Router + Vuex

用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: assets 中是静态资源,components 中是组件(以 .vue 为后缀名的文件),store 中是使用了 vuex 的 js 文件. package.json: { "name": "element-starter", "description"

backbone.Router History源码笔记

Backbone.History和Backbone.Router history和router都是控制路由的,做一个单页应用,要控制前进后退,就可以用到他们了. History类用于监听URL的变化,和触发Action方法,他可以添加对url的监听, Router类用于定义和解析路由规则,并将URL映射到Action. router和history一些个人的注解 <!DOCTYPE html> <html> <head> <meta charset="u

vue-router history地址改变 页面没变

热门专题

vue-router history地址改变页面没变