使用 vue-router 从根 Vue 实例获取数据时遇到问题答案

【问题标题】：Trouble getting data from root Vue instance with vue-router使用 vue-router 从根 Vue 实例获取数据时遇到问题
【发布时间】：2018-08-09 06:39:54
【问题描述】：

我将所有数据加载到根 Vue 实例中，并尝试在我的路由器中访问它们。

如何在我的路由器中访问我的根实例中的数据？我在网上找到的所有 this.a.app 或 this.app 答案都不是解决方案。

Router.js：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/login'
import Container from '../components/container'
Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
            path: '/login',
            name: 'Login',
            component: Login,
            props: { test: **<data from my Vue root instance>** }
        },
        {
            path: '/products',
            name: 'Container',
            component: Container,
            children: [{
                    path: 'flavor',
                    component: Login
                },
                {
                    path: 'storage',
                    component: Login
                },
                {
                    path: 'network',
                    component: Login
                }
            ]
        }
    ]
})

Main.js：

import router from './router’
var vm = new Vue({
el: ‘#app’,
router,
template: ‘’,
components: {
App
},
data() {
return {
modal: ‘’

【问题讨论】：

标签： javascript vue.js routes vue-router

【解决方案1】：

我会避免使用路由器实例共享数据。我个人喜欢有一个存储文件，其中包含我想在我的组件之间共享的数据。

export default {
  state: {
    counter: 0
  }
}

在你的组件中你可以导入文件：

import store from '../store'

export default {
  data () {
    return {
      sharedState: store.state
    }
  }
}

对 sharedState 的更改也将传递给其他组件。

来源：https://skyronic.com/2016/01/03/vuex-basics-tutorial/解决方案 2

【讨论】：