路由匹配

    你可以在对应的组件内查看相关路由元信息

    1. //tabbar-1.vue
    2. <template>
    3.     <view>
    4.         <h1>tabbar-1</h1>
    5.     </view>
    6. </template>
    8. <script>
    9.     export default {
    10.         onLoad() {
    11.         }
    12.     }
    13. </script>

    这是一个简单而又实用的列子。对于 v1.3.5 起的 H5还有更多的配置，甚至你可以通过配置 uni-simple-router 实例化参数来控制 H5运行模式。

    H5端完全使用vue-router开发 v1.3.5+

    下面是一个完全使用 开发的模式的例子：

    2. <template>
    3.   <div>
    4.       //通过vue-router全局组件router-view来挂载视图
    5.       <router-view></router-view>   
    6.   </div>
    7. </template>
    9. <script>
    10. export default {
    11.   data() {
    12.     return {}
    13.   },
    14.     console.log(this.$route)    //此时我们使用vue-router的api进行获取
    15.   },
    16. }
    17. </script>

    你还可以点击这里进行学习更多配置。有时候你在H5端做简单的路由url美化，你还可以这样做：

    除了可以 完全使用vue-router开发 以外，你还可以在 uni-app 原有配置的基础上进行修改 url。

    上面的配置很简单，你只需要配置一个简单的 aliasPath 即可。 通过设置 aliasPath 别名来重置 uni-app 的默认路径，如果你不提供 aliasPath 时 则默认采用 path 作为路径进行匹配。所有这时的 path 是不能缺少的。作为基础，及为了兼容其他端，此时的path不能少，必须和 pages.json中的页面路径匹配。 因为 uni-app 在h5端时，第一个页面都设置为 '/' ，你可以不用配置。

    H5端动态加载页面 v1.3.5+

    1. const router = new Router({
    2.   h5:{
    3.     useUniConfig:false,   
    4.   },
    5.   routes:[
    6.     {
    7.         name:'router1',
    8.         //为了兼容其他端，此时的path不能少，必须和 pages.json中的页面路径匹配
    9.         path: "/pages/tabbar/tabbar-1/tabbar-1",    
    10.         component: () => import('@/pages/component/tabbar-1.vue'),
    11.         aliasPath: '/tabbar-1', 
    12.     },
    13. });

    一个简单的 component 选项进行动态加载。设置 useUniConfig:false 同 完全使用vue-router开发 基本一致。他们简单的区别就在于 不能设置子路由，只能是一层路由、不能 。

    常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 (*)：

    当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了History 模式，请确保正确配置你的服务器。

    匹配优先级 v1.3.5+