Blog - wingsico

在写vue的路由表时,通常会遇到这样的一个问题,我已经定义了一系列路由,但我想要用户在访问非定义的路由的时候返回一个提示或者重定向至指定页面。该如何实现?

解决方案

首先我想到的是监听hash的变化,根据已经定义的路由来判断是否是非定义的路由,但这样有个问题,当定义其他路由或修改路由的时候,监听路由变化的函数也要修改,这就造成了一个很强的耦合性,因此此方法并不实用。 但略微查看vue-router的官方文档,没有看到相关的解决方案,于是在google搜索相关的问题,在一篇博客里看到一句话:

又一个在使用Vue过程中遇到的新坑。首先踩这个坑都怪我自己看文档不够仔细,所以告诫大家,看文档真的一定要认认真真的一个个字的认真的品味。 vue-router 动态路由匹配 中有这么一段: 匹配优先级 有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。

吓得我又回去翻看了一下文档,果然,在最最下面有一个匹配优先级。。 因此,想到了一个更加简单的方法去实现限制非定义路由的访问:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{ // 404 置后
path: '*',
component: {
beforeCreate () {
window.swal({
type: 'warning',
title: '404 NOT FOUND',
timer: 1000,
showConfirmButton: false
})
this.$router.replace('/')
},
template: '<div></div>'
}
}

这里的window.swal是引用的sweetalert.js的一个方法,主要作用就是一个美化提示弹框。 而对于这个component对象内的beforeCreate就很陌生了,为什么配置路由的component会出现这个,难道是属于路由的生命周期? 但转念一想,component里本来应该的数据是什么?

1
2
3
4
{
...
component: require('@/views/hello') // 类似写法
}

component内本该是由一个单文件组件 (.vue文件) export出来的,因此,我认为这里的beforeCreated其实是组件的生命周期,因为在非单文件组件中,定义一个组件的方式就是如此: 这是一个官方的demo:

1
2
3
4
5
6
7
8
9
10
11
12
var Child = {
template: '<div>A custom component!</div>',
data () { ... }
}

new Vue({
// ...
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})

所以由此可以看出,我的判断应该无误,ok,大功告成!

 评论