无法使用vue-router从root Vue实例获取数据

Posted 2021-04-24

我在根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: ‘’

答案

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

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