vue-router(hash模式)常见问题以及解决方法

问题一：
// 动态路由
/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,就可以了，那么再次从详情页返回列表的时候，列表筛选结果的状态还存在这种体验，就相当到位了。
---------------------
作者：water-gourd
来源：CSDN
原文：https://blog.csdn.net/zhang_fox/article/details/80178986
版权声明：本文为博主原创文章，转载请附上博文链接！

巴特西

vue-router(hash模式)常见问题以及解决方法

最新文章

热门文章