vue页面刷新路由丢失
2018-01-24 17:07:45 weixin_33743880 阅读数 84

vue 开发微信商城项目,
需求如下:

购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法
  beforeDestroy() {
    this.$root.Bus.$off('judge')
    this.$root.Bus.$off('refreshDetail')
    this.$root.Bus.$off('clearAll')
    this.$root.Bus.$off('upDataCart')
  },

无奈,通过beforeRouteLeave来销毁

  beforeRouteLeave(to, from, next) {
    this.$root.Bus.$off('judge')
    this.$root.Bus.$off('refreshDetail')
    this.$root.Bus.$off('clearAll')
    this.$root.Bus.$off('upDataCart')

    next()
  },

同样的,物理返回时无法触发购物车的created方法,则无法触发bus的$on方法
归根结底,物理返回时刷新页面则可以处理此问题
思路一

   beforeRouteEnter(to, from, next) {
     next(()=>{
         window.location.reload()
     })
   },

此方法理论貌似可行,但是页面会狂刷不止,
最后采用了思路二,貌似是一个很low的方法,但是解决了实际问题

 this.$router.replace({ name: 'cart' })// 处理返回刷新问题
      this.$router.push({
        path: '/order/order_sure',
        query: {
          sku: sku_str,
          cart: 'cart'
        }
      })

页面跳转前先通过路由replace到当前页,再跳转到订单页面,返回可以自动刷新了,
这个方法并不理想,如果您有更好的方法,欢迎分享


有专门的方法处理此问题,在购物车页面,添加如下代码即可

  // 销毁组件,返回刷新
  deactivated() {
    this.$destroy()
  },
2018-05-22 13:07:26 qq_36850813 阅读数 29211
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
这几个都可以刷新:
window.location.reload();刷新
window.location.href=window.location.href;刷新
window.close();关闭窗口,不弹出系统提示,直接关闭 
window.close()相当于self属性是当前窗口

window.parent.close()是parent属性是当前窗口或框架的框架组


页面实现跳转的九种方法实例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navigate</title>
<script language="javascript">
    setTimeout('window.navigate("top.html");',2000);
    setTimeout('window.document.location.href="top.html";',2000);
    setTimeout('window.document.location="top.html";',2000);
    setTimeout('window.location.href="top.html";',2000);
    setTimeout('window.location="top.html";',2000);
    setTimeout('document.location.href="top.html";',2000);              
    setTimeout('document.location="top.html";',2000);
    setTimeout('location.href="top.html";',2000);
    setTimeout('location.replace("top.html")',2000);
    //window对象
        //document对象
            //location对象
                //href属性
                //1.window.document.location.href
                //2.window.document.location
                //3.window.location.href
                //4.window.location
               
                //5.document.location.href
                //6.document.location
                //7.location.href
                //8.window.navigate
                //9.location.replace
                //只要使用location方法,和任意的window对象,location对象,href属性连用,都可以页面的跳转//// 
</script>
</head>

<body>
页面将在2秒后跳转
</body>
</html>

解释:
location是个对象,比如本页的document.location和window.location的属性有    
  location.hostname   =   community.csdn.net 
  location.href   =   http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02 
  location.host   =   community.csdn.net 
  location.hash   =   
  location.port   =   
  location.pathname   =   /Expert/topic/4033/4033372.xml 
  location.search   =   ?temp=2.695864E-02 
  location.protocol   =   http: 

  可见href是location的属性,类别是string。


vue页面刷新:

我 用了一次 

location.reload()//刷新

1.

location.reload()router.go(0)

这个router是定义的vue-router,例如:

const router = new Router({})

把这个export导出,在需要的组件里import引用


2.

// replace another route (with different component or a dead route) at first

// 先进入一个空路由
vm.$router.replace({
path: '/_empty',})
//then replace your route (with same component)
vm.$router.replace({
path: '/student/report',
query: {
'paperId':paperId
}
})


3.

this.$router.push({
path:this.$route.fullPath, // 获取当前连接,重新跳转
query:{
_time:new Date().getTime()/1000 // 时间戳,刷新当前router
}
})

----------- -------------------补充 -------------------------

上面这个方法只能满足部分需求,使用 this.$router.replace('/refresh'),更简洁,其中refresh.vue文件属于中转文件,在该文件的beforeRouteEnter钩子里,代码如下beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}

这样,你每次想刷新整个路由,可以调取this.$router.replace('/refresh')。



4.

看了很多方法,可能需求不一样,没能解我的问题,有的是整个页面刷新,有的是用$root,但我的this.$root不是App.vue下,因此回去看了一下官方文档.

因此,我这边想了想解决办法就是先push一个新的页面,在返回上一个页面即可.

代码如下所示:

    let NewPage = '_empty' + '?time=' + new Date().getTime()/1000
    // 之后将页面push进去
    this.$router.push(NewPage)
    // 再次返回上一页即可
    this.$router.go(-1)

window.location.href window.location.replace() window.location.reload()三者的区别

总是在资料上看到 window.location.href和window.location.replace的区别,但是不是很明白,今天彻底明白了。简单说说:

有3个jsp页面(1.jsp, 2.jsp, 3.jsp),进系统默认的是1.jsp ,当我进入2.jsp的时候, 2.jsp里面用window.location.replace("3.jsp");与用window.location.href("3.jsp");从用户界面来看是没有什么区别的,但是当3.jsp页面有一个“返回”按钮,调用window.history.Go(-1);wondow.history.back();方法的时候,一点这个返回按钮就要返回2.jsp页面的话,区别就出来了,当用window.location.replace("3.jsp");连到3.jsp页面的话,3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是不好用的,会返回到1.jsp 。当用window.location.href("3.jsp");连到3.jsp页面的话,3.jsp页面中的调用window.history.go(-1);wondow.history.back();方法是好用的,会返回2.jsp。因为window.location.replace("3.jsp");是不向服务器发送请求的跳转,而window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的,所以会跳到系统默认页面1.jsp 。window.location.href("3.jsp");是向服务器发送请求的跳转,window.history.go(-1);wondow.history.back();方法是根据服务器记录的请求决定该跳到哪个页面的,所以就可以返回到2.jsp。

 

 

  1. window.location.href=“url”:改变url地址;
  2. window.location.replace(“url”):将地址替换成新url,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后 退”来访问已经被替换的URL,这个特点对于做一些过渡页面非常有用!
  3. window.location.reload():强制刷新页面,从服务器重新请求!



2019-01-09 15:13:53 woshidamimi0 阅读数 917

vue路由传递参数如果用params传递参数,那么页面刷新就会丢失数据,可以改用query来传递参数,这样刷新就不会丢失

 this.$router.push({ name: "MyTable", query: {arg: 'arg'}});

如果传递的是对象,注意要把对象转为字符串,否则刷新就会变为undefined了

2019-01-02 11:34:27 meikaied 阅读数 163

11

2017-10-10 13:59:56 panyox 阅读数 8018

在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好。

我的解决有两种:

第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>。

虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代码写起来复杂

第二种方法:直接用localStorage,简单粗暴(推荐)

代码如下:

list.vue

export default {
        data () {
            return {
                searchForm:{
                    project_name:'',
                    status:'',
                    city:'',
                    round:'',
                    fund:'',
                    charge:'',
                    page: 1
                },
           },
           beforeRouteLeave(to, from, next){
            //打开详情页(或者下一个任意界面)之前,把筛选条件保存到localStorage,如果离开列表页并且打开的不是详情页则清除,也可以选择不清除
            if (to.name == 'Detail') {
                let condition = JSON.stringify(this.searchForm)
                localStorage.setItem('condition', condition)
            }else{
                localStorage.removeItem('condition')
            }
            next()
        },
        created(){
            //从localStorage中读取条件并赋值给查询表单
            let condition = localStorage.getItem('condition')
            if (condition != null) {
              this.searchForm = JSON.parse(condition)
            }
            this.$http.get('http://example.com/api/test', {params: this.searchForm})
            .then((response)=>{
                console.log(response.data)
            }).catch((error)=>{
                console.log(error)
            })
        }
    }
}

这种方法也受限于localStorage的局限性,不过可以通过使用cookie来弥补,具体不再详述。


vue 路由权限 页面刷新时报404问题

阅读数 729

开始的时候我是这么写的、这个时候刷新页面已经配置好的路由页面莫名其妙跑到404了闹心啊各种debugger都不好使然后问了一下群 大佬说这个404不能写到路由要 在addrouter里进行拼接404这个路由然后我就把这个注释了在这里试了一下卧槽 大佬大佬  ...

博文 来自: weixin_38641550

vue页面刷新 reload()

阅读数 26

首先在vue里配置在所想添加reload的vue里直接如下:

博文 来自: weixin_45011910

vue禁止页面刷新

阅读数 662

通过addEventListener添加监听事件,必须通过removeEventListener来清除,这里的组件的显示与否为是否添加监听事件标记的衡量因素。

博文 来自: weixin_43254676

vue 浏览器页面刷新

阅读数 1104

当刷新(浏览器刷新)页面的时候,重置到首页(或其他页面)纯js的是window.onload()但是vue几乎不会用到这个,vue所有的是生命周期那么我们可以根据生命周期来实现这个beforeCreate(),created(),beforeMount(),mounted()一个vue只执行一次项目刷新必执行App.vue,所有将此代码放到App.vue中,或者其他首次加载就会执...

博文 来自: qq_31126175

vue 路由传递参数,刷新页面后参数丢失

阅读数 3624

在用vue做项目的时候,发现在新页面刷新后,上一页面带过来的参数会丢失,查阅资料才发现原来自己对params和query理解不透彻下面是两种传参方法:1、用params传参,需要路由里加上这个参数this.$router.push({name:'list',params:{id:id}});routes:[{path:'/list/:id',...

博文 来自: qq_43103581
没有更多推荐了,返回首页