vue-router的模糊匹配和精确匹配

场景：最近在做的这个项目有一个场景是个人中心页面，有几个嵌套的二级路由，其中有一个订单的子路由下面还嵌套着几个三级路由。这里二级路由是通过点击router-link进行点击跳转，三级路由是通过二级路由中的查看详情等按钮进入的。问题就在这里当跳转到三级路由的时候对应的二级路由的router-llink如何保持激活样式。

router.js文件中的三极路由的path属性中要写入二级路由的path属性

    path: '/order',
    name: 'order',
    component: resolve => require(['./views/personal/order/order'],resolve),
    redirect: '/order/orderHome',
    children: [
        {
            path: '/order/orderHome',
            name: 'orderHome',
            component: resolve => require(['./views/personal/order/orderHome/orderHome'],resolve),
            meta: {title: '我的订单'}
        },
        {
            path: '/order/orderLogistic',
            name: 'orderLogistic',
            component: resolve => require(['./views/personal/order/orderLogistic/orderLogistic'],resolve),
            meta: {title: '物流追踪'}
        },

order是二级路由，orderHome和orderLogistic是三级路由。

<router-link tag="div" :to="{name: 'order'}" active-class="active">我的订单</router-link>

router-link中要注意区分active-class（模糊匹配）和exact-active-class（精确匹配）

精确匹配必须要在url中匹配到router-link中的to属性对应的name，否则router-link不会处于激活状态

模糊匹配只要url中有router-link中的to属性对应的name，不用完全匹配就可以处于激活状态。

下面是三级路由的写法

gotoLogistic () {
    this.$router.push({
        name: 'orderLogistic'
    })
},
gotoCommit () {
    this.$router.push({
        name: 'orderCommit'
    })
}

这里建议大家路由跳转用name跳转，path跳转的代码比较麻烦