vue-router-plus
this vue-router-plus is extends from vue-router but plus some features
notice
vue-router-plus now only compatibable with vue-router@3.0.7
because the vue-router 3.1.* upper use the promise style that will product uncaught promise error,see this
- all navigation behavior will be force style
- routes config support
queryOptions
,and add$route.meta.query
vm.$searchQuery
- wrapper function
plusHook
, just wrap the original route hook - router.isHistoryBF,whether the router is in popstate progressing
- infinite redirect loop will throw Error
use
Vue
force push && replace
all route-link
.push
.replace
will be force mode,to resolve same route redirect loop problem
// force push some path,even the final path is same, it will append _f query// /a?age=1&_f=1this$router
this$router
router.reload()
reload spa will reload with the currentRoute
this$router
router.isHistoryBF {boolean}
a tag show whether the user press the browser forward
or backward
button
- only effect in
history
mode
queryOptions
typed query options in routes config meta
routes.js
; path: '/a' meta: queryOptions: age: type: Number default: 20 name: type: String default: 'lee'
then route.meta.query will be
- /a -> {age: 20, name: 'lee' }
- /a?age=33 -> {age: 33,name:'lee' }
- /a?age=22&name=cc -> {age:22,name:'cc'}
plusHook Support
the plusHook function can do a lot things that reduce the time on debug vue-router
- resolve the same route loop problem,by always append
_f
query onnext
function - support
promisable
orsubscribe
style route hook - auto enabled in global hook like
router.beforeEach
androuter.beforeResolve
routerrouter
redirect sense
router
use plusHook in mixin or .vue
a.vue
$searchQuery
now vue instance provide a prop name $searchQuery is equal to to.meta.query
- $searchQuery === $route.meta.query
extra router prop
same to beforeEach to,from,next
- router.to
- router.from
- router.next