Vue route root
Installation
npm install vue-route-root
There are two ways you can use this plugin
First way
This requires vue-router to be installed!
Use this plugin by calling the Vue.use()
global method. This has to be done before you start your app with new Vue()
:
Vue
Usage
The above adds a computed field via mixins that is accessible from any component.
Access the root of a route from any component like this:
this$routeRoot
Example
// pages/Index.vue<template> <SubComponent /></template><script>import SubComponent from './SubComponent' export default { components: { SubComponent }, data() { return { isOpen: false } }}</script>
// pages/SubComponent.vue<template> {{ $routeRoot.isOpen ? 'It is open' : 'It is closed' }}</template> <script>export default {} // < no props</script>
Second way
Without registering a plugin in Vue you can map root and routeRoot properties to your local component.
// pages/Index.vue<template> <SubComponent /></template><script>import SubComponent from './SubComponent' export default { components: { SubComponent }, data() { return { isOpen: false } }}</script>
// pages/SubComponent.vue<template> {{ isOpen ? 'It is open' : 'It is closed' }}</template> <script>import { mapRoot } from 'vue-route-root' export default { computed: mapRoot(['isOpen']) // you can put the keys of data, props, computed and methods here}</script>
mapRoot will both look in the top root as well as the route root if you have vue-router installed.
If you have your own set of computed fields in the local component, you have to destructure the result of mapRoot
:
computed: ... { return 'no problem' }