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

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

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

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

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