关于vue-router路由匹配的踩坑事件

又一个在使用Vue过程中遇到的新坑。首先踩这个坑都怪我自己看文档不够仔细

所以告诫大家，看文档真的一定要认认真真的一个个字的认真的品味。

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

那么来说下业务场景吧，我这里的思路就是很简单的通过路由来控制显示内容和业务逻辑。

出问题的代码：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/app/:id'
  },
  {
    path: '/app/page1',
    meta: {title: 'page1'}
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

问题在meta.title的值一直是undefined。

最终我尝试出三种解决方法：

方法一

最土的办法

const temp = {
  '/page1': 'page1',
  '/page2': 'page2'
}

const routes = [
  {path: '/app/:id'}
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  document.title = temp[to.path]
  next()
})

方法二

移除动态路径参数

const routes = [
  {
    path: '/app/page1',
    meta: {
      title: 'page1'
    }
  },
  {
    path: '/app/page2',
    meta: {
      title: 'page2'
    }
  }
]

方法三

将动态路径参数置后，滞后匹配。

const routes = [
  {
    path: '/app/page1',
    meta: {title: 'page1'}
  },
  {
    path: '/app/:id'
  }
]

最终，在项目中我选择使用方法二去解决，这样逻辑更清晰，并且维护成本低。

也算是更了解vue-router了吧~