vue-router-compositions
A util package for Vue-Router and Vue Composition API.
Installation
$ npm install vue-router-compositions
Basic Usage Examples
useRouteParam
Reactive route param. Updated from route param value, with a setter that apply route change.
; { const articleId = ; // "articleId" is a computed property from current route: ; return { // this actions will set up a route change accordingly articleIdvalue = 'new-article-ID'; } }
useQueryParam
Reactive query param. Updated from route param value, with a setter that apply route change.
; { const page = ; const sort = ; return { // will trigger a query route change. pagevalue = newPage; } { // trying to set a value that not included on the enumOptions will be ignored. sortvalue = isAscending ? 'ascending' : 'descending'; } }
useNavigateItem
Helper function to create a navigation method for your entities.
Let's say you're using a table of some kind, and you want to subscribe to a row click event. In common cases, the "click" event will send the row's entity item as the event payload. In case you want to trigger a route change to navigate to this item's screen, you can use this method as the example below:
; template: '<el-table :data="rows" @row-click="navigateItem"/>' { const navigateItem = ; return rows: rowId: '1234' title: 'first article' rowId: '2345' title: 'second article' rowId: '4567' title: 'third article' navigateItem }
useRouteDispatcher
Create a reactive dispatcher from a router param
; const fetchArticle = { const result loading error promise param = ; return // all values are reactive param result loading error promise ; }
Enjoy!