vue 刷新之后 嵌套路由不变 重新渲染页面的方法

解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的

1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来

2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法

这是条件渲染变化了为false

在修改数据之后使用 $nextTick，

条件渲染变化了为true

则可以在回调中获取更新后的 DOM

如果需要带有查询参数，可以用编程试导航，query来传参，但是这种方式可能刷新之后会有问题。

我的解决方法是在刷新之后点击页面中的某个条件的时候，将参数存在localstorage里面，这个时候执行reload方法来重新加载路由。这样无论路由变美变化页面都会重新加载，再次加载数据。。

这样还会有一个问题，就在在页面刷新的时候，查询条件会重置，这样存在localstorage里面的值也要清空。

解决方法就是监听浏览器的刷新事件

window.onbeforeunload = function(event) {

sessionStorage.removeItem('querydataObj')

};

然后清除sessionstorage。

以上这篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2018-09-11

本文知识点比较简单,主要面向vue新人解惑,vue前辈请忽略. 实现功能: 见上图,这是一个产品列表,当进入不同列表时应该更新内容. 代码如下: //router配置 { path: "/products/:category", name: "Products", components: { ... } } //组件js配置 mounted() { this.getData(this.$route.params.category); }, methods: { ge

前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击

场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

通常情况下我们喜欢设置keepAlive 包裹 router-view

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了:

问题描述:vue-router导航切换 时,如果两个路由都渲染同个组件,组件会重(chong)用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 翻车现场再现: 这是我的/router/index.js 的内容节选 export default new Router({ routes: [ { path: '/main', component: Main }, { path: '/get', component: Main } ] }) 这是我的 Main.v

每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

vue有个写法需要注意: 如果是跳转到默认首页,router-link 应该写: to: "{path: ' / ' } " 如果跳转到非默认首页的时候,router-link 应该写: to: "{path: ' about ' } " 就是除了跳转到默认首页的情况下,其他的都要去掉开始的斜杠 / ,是个坑,我踩了,祝你好运! 以上这篇解决vue路由后界面没有变化,但是链接有的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', component: () => import('@/components/index').then(m => m.default) },{ path: '/index', name: 'index', component: () => import('@/components/index').then(

我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给增加一个不同:key值,这样vue

①先在我们的登录页面存储一个登录数据 // 登录成功时保存一个登录状态: sessionStorage.setItem("flag", 1); ② 添加路由守卫 方法一: 直接在路由中添加 const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... }) 方法二:当我们使用的是export default 方法时可以在main.js中添加 router.b

刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据.根据我的需求,最合适的是sessionStorage. beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中. 当然,在

在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.