vue & vue router & dynamic router

时间:2021-12-03 18:38:50

vue & vue router & dynamic router

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

vue & vue router & dynamic router

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

vue & vue router & dynamic router

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


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

typo bug

vue & vue router & dynamic router

vue & vue router & dynamic router