# H5端使用自定义路径并拦截uni-app自带tabbar

通过默认的 aliasPath 来给 H5端 设置别名路径时。你会发现在uni-app自带的tabbar会无法进行拦截或者是路径还显示之前uni-app默认的。

这时我们就需要通过拦截来给定一个指定路径,完成重定向。

简单的路由注册:

const router = new Router({
    routes:[
        {
            aliasPath:'/',
            path: "/pages/tabbar/tabbar-1/tabbar-1",
            name:'tabbar-1'
        },
        {
            aliasPath:'/tabbar2',
            path: "/pages/tabbar/tabbar-2/tabbar-2",
            name:'tabbar-2'
        },
        {
            aliasPath:'/tabbar3',
            path: "/pages/tabbar/tabbar-3/tabbar-3",
            name:'tabbar-3'
        },
        {
            aliasPath:'/tabbar4',
            path: "/pages/tabbar/tabbar-4/tabbar-4",
            name:'tabbar-4'
        },
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

一串简单的配置,完成 Router 实例化。看的出是通过使用 uni-app 默认配置来完成页面渲染的。这是一个 uni-app 自带底部tabbar的示例,使用 aliasPath 重写 uni-app 路径时,底部菜单确实能加载出来。当点击底部tabbar时就会出现空白页面,那么这时我们在代码中加入这样的配置即可完成。

 
 
 
 
 
 






















 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



const whitelist = {     //声明了一个白名单
	'/pages/tabbar/tabbar-1/tabbar-1': 'tabbar-1',
	'/pages/tabbar/tabbar-2/tabbar-2': 'tabbar-2',
	'/pages/tabbar/tabbar-3/tabbar-3': 'tabbar-3',
	'/pages/tabbar/tabbar-4/tabbar-4': 'tabbar-4',
}
const router = new Router({
    routes:[
        {
            aliasPath:'/',
            path: "/pages/tabbar/tabbar-1/tabbar-1",
            name:'tabbar-1'
        },
        {
            aliasPath:'/tabbar2',
            path: "/pages/tabbar/tabbar-2/tabbar-2",
            name:'tabbar-2'
        },
        {
            aliasPath:'/tabbar3',
            path: "/pages/tabbar/tabbar-3/tabbar-3",
            name:'tabbar-3'
        },
        {
            aliasPath:'/tabbar4',
            path: "/pages/tabbar/tabbar-4/tabbar-4",
            name:'tabbar-4'
        },
        {
            aliasPath:'/404',
            path: '/pages/test/404',
            name:'404'
        },
        {
            path: '*',
            name: 'moddle',
            redirect:to=>{
                const name = whitelist[to.path];
                if(name){
                    return {name}
                };
                return {name:'404'}
            }
        }
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

我通过预设 404 页面和 匹配所有项来拦截白名单选项。当通过白名单时有预设选项及返回预设选项栏目,否者就返回 404 页面。注意这里的 404 页面是 pages.json 已经配置好了的选项。

其实就这么简单,既可完成拦截和重定向。H5 端可以 配合 redirect通配符 完成你想要的骚操作。赶紧去试试吧