Question

如何将路由器传递给子组件。

我有这个作为我的路由器

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
export default function () {
const Router = new VueRouter({
    mode: 'history', 
    routes : [
      {
        path: '/',
        beforeEnter: ifAuthenticated,
        component: () => {
          return  import('./../container/Index.vue')
        }
      }, 
      {
        path: '/login',
        beforeEnter: ifNotAuthenticated,
        component: () => {
         return import('./../container/logn.vue')
        }
      }
    ],

  })

  return Router
}

现在，我的"/"（ index.vue ）路线具有一个导航栏组件，而导航栏具有一个注销按钮，该按钮可以注销用户并将他们重定向到登录页面

考虑这是我的index.vue（与我所做的一样）

<template>
  <q-layout>
    <Navbar :thisInfo="routerAndStore"/>
 </q-layout>
</template>

<script>
import Navbar from "./../components/navbar.vue";
export default {
  name: "PageIndex",
  components: {
    Navbar
  },
  data() {
    return {
      routerAndStore: this
    };
  }
};
</script>

然后在我的 navbar.vue 中，我做了类似的事情

<template>
  <div class="nav-pages-main">
      <a @click="logoutUser">
        <h5>Logout</h5>
      </a>
  </div>
</template>

<script>
export default {
  name: "navbar",
  methods: {
    logoutUser: () => {
      return this.thisInfo.$store.dispatch("GOOGLE_PROFILE_LOGOUT").then(() => {
        this.$router.push("/login");
      });
    }
  },
  props: {
    thisInfo: {
      type: Object
    }
  }
};
</script>

但是这似乎不起作用（这是不确定的），因此，如果有人可以帮助我我们如何将this传递给我们的子组件

Answer 1

请参考Vue-Router官方文档here

基本上，在他们的用例中，主要组件（index.vue）以路由器为参数，并在其模板中提供<router-view>作为占位符，以用于将基于当前路线呈现的组件。

在您的代码中，我看到您使用路由器来渲染主要组件的另一种方式。

routes : [
  {
    path: '/',
    beforeEnter: ifAuthenticated,
    component: () => {
      return  import('./../container/Index.vue')
    }
  },
  ...
]

您能使用文档中描述的正确方法再次尝试并告诉我结果吗？

编辑：根据您发布的App.vue（假设它是应用程序的入口点），您应该为App组件提供路由器。

<template>
    <div id="q-app"> <router-view/> </div>
</template>
<script>
    import router from '/path/to/your/router';

    export default { name: "App", router };
</script>
<style>
</style>

完整的代码可以在Vue-Router example

中找到

VueJS将路由器传递给子组件

1 个答案: