vue & vue router & dynamic router

vue & vue router & dynamic router

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

old

https://router.vuejs.org/api/#the-route-object

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

new

https://router.vuejs.org/guide/advanced/navigation-guards.html

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

history-mode

404

asterisk (*):

{
  // will match everything
  path: '*'
}
{
  // will match anything starting with `/user-`
  path: '/user-*'
}

* & pathMatch

// Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route

https://router.vuejs.org/guide/essentials/history-mode.html

https://github.com/pillarjs/path-to-regexp#parameters

---

/user/:id !== /user:id

typo bug