### 问题一:
```
// 动态路由
/detail/:id
```
动态路由跳转的时候,页面是不刷新的,相信很多人都遇到了相同的问题
> ### 解决方法
在全局的router-view组件上设置一个key值,此key值为一个时间戳或者随机字符,对于keep-alive的组件不做这个处理。


### 问题二:
```
 router.go(0)
```
这种写法本质上是想达到刷新当前页面的目的,但是在一些浏览器上不兼容,主要是ios,webview上也会出现问题,动作并不会触发
> ### 解决方法
使用window.location.reload()来代替,如果项目中使用了vuex的话,这种做法会导致状态清空,需要自己把握,还有另外一种处理方式,就是在列表页删除某一个项操作,操作完成需要重载,这时就可以使用异步请求来达到效果。更多的情况下,我们是想重置一些表单元素的值,或者大量的数据重置,这种情况可以试试
```
Object.assign(this.$data, this.$options.data())
```
### 问题三


hash模式在微信场景下的一个问题,当我们发起一个微信授权链接时,微信会返回一个code字段,和一些其他的参数,这些参数以query的形式连接,并且code的有效期很短,单页几乎每次都要重新授权。那么第二次授权的时候这些参数并不会从链接里消失,会一直带着,影响了第二次授权。
> ### 解决方法
授权之前检测链接里是否有code参数,有的话就不能使用location.href作为微信的redirect_url参数,看代码
```
let oldCode = this.getQueryString('code') ;
let temp = '' ;
if( oldCode ){
  temp = window.location.origin + window.location.hash ;
}else{
  temp = window.location.href ;
}
```
这样还不能彻底避免链接中带有老的code参数的问题
我们还需要进一步处理,通常的业务是支付或者登陆完成是要进行跳转的,这个时候就不要使用vue-router的router.push||router.replace等等的跳转了,我们需要把链接中的其他多余参数干掉,避免影响,通常使用href跳转,具体要跳转到哪就看业务需求了。


### 问题四


页面授权问题,通常我们的实际业务流程中,有很多页面是需要登录授权之后才能进入的。
> ### 解决方法
这时我们需要对路由进行一些处理,例如这样定义一个路由
```
   {
      path : '/demand' ,
      component : demand ,
      meta : { requiresAuth : true }
    }
```
我们在进入路由之前进行验证
```
router.beforeEach((to , from , next) => {
// 判断是否带有特殊标记
  if( to.matched.some( record => record.meta.requiresAuth ) ){
    let login = getSession( 'login' ) ;// 验证是否登录
    if( !login ){
      next({
        path : '/login', // 登录页
        query : { redirect : to.fullPath }
      })
    }else{ next() }
  }else{ next() }
  // 需要注意的是这里的next()方法一定要调用,不然会阻塞路由,导致页面不会正常跳转
})
```


### 问题五


微信分享出来的链接带有一些其他的参数,比如从app分享出来的会有一个from=singlemessage的参数,是加在域名后面的,还有朋友圈from=timeline等等。
```
http://www.watergourd.com/?from=singlemessage#/index
```
这样的形式会影响我们正常的路由系统,导致一系列的问题
> ### 解决方法
```
router.beforeEach((to , from , next) => {})
```
还是在这个钩子里处理,通过 
```
let reg = /singlemessage|timeline/g
``` 
这样的正则来判断是否包含这些参数,包含的话就干掉,从新跳转,我最早的处理方式是在index.html的头部来处理,后面发现有时成功,有时失败,才考虑到在进入路由系统之前来处理这些。


### 问题六


分享出来的页面点进去为首页,这个问题非常棘手,由于涉及到第三方,调试起来也麻烦,一般的本地开发环境是没办法测试的。


> ### 解决方法


首先应该保持路由参数的清洁,然后把页面的路由都定义在空path之前,也就是说所有的异常路由都放到最后,特别是空path的这种情况,有些人的处理是把'/'定义在最前面,然后用重定向的方式导到首页,后面我发现这种处理容易出问题
```
const routes = [ 
    {
      path : '/checkstandSuccess',
      component : checkstandSuccess
    },
    // 异常路由处理------------------
    {
      path : '/' ,
      redirect : '/home'
    },
    // 404页面
    {
      path: '*',
      component: NotFoundPage
    }
]
```


### 问题七


keep-alive导致的问题,通常我们需要缓存一些静态页面,但是有时候我们也需要通过一些状态或者参数来刷新页面,这时我们就需要更新缓存


> ### 解决方法


定义:在路由信息中配置keep-alive为true时,将会缓存当前页面,第一次进入一个缓存的页面时,vue的生命周期执行的顺序为created() -> mounted() -> activated(),这里的activated()钩子只存在于keep-alive为true的路由页面,之后每次进入这个缓存页面的时候,都不会再去执行vue的生命周期,而是从缓存里面拿,只有activated()钩子在每次进入这个缓存页面是才会执行,当然还有一个钩子deactivated()是在离开页面的时候会执行.
这里就存在一个坑,当我们需要通过子组件或者其他的页面传递的 参数,来更新这个缓存页面的DOM时,发现按正常逻辑处理数据获取的部分一直不会调用,这时就要在activated()里面也放一分请求数据的逻辑,来更新dom.这只是其中的一种解决办法。
第二种办法是,通过beforeRouteEnter()和beforeRouteLeave()这两个钩子来解决,注意这两个钩子是在vue2.2之后才能使用。例如在搜索页输入关键字,跳转到列表页进行数据获取,而列表页是keep-alive为true的,那么此时我们只需要在搜索页的生命周期中配置
beforeRouteLeave(to,from,next){
    to.meta.keepAlive = false;
    next();
    }
就ok了,to表示即将要进入的页面的路由对象,通过更改keepAlive属性,以达到更新列表页的目的。还有一种情况,就是从列表页到详情页的时候,往往都需要缓存列表的筛选条件或者结果,那么在列表页的beforeRouteLeave()中配置from.meta.keepAlive=true,就可以了,那么再次从详情页返回列表的时候,列表筛选结果的状态还存在 这种体验,就相当到位了。
Logo

前往低代码交流专区

更多推荐