Question

我是vuejs的新手并且在使用它时有一些问题。我创建了一个根视图，其中包含2个子组件，rootview.vue文件如下所示：

<template>
  <div id="rootView">
    <calendar-top-view></calendar-top-view>
    <calendar-bottom-view></calendar-bottom-view>
  </div>
</template>

<script>
  import calendarTopView from './calendarTopView.vue'
  import calendarBottomView from './calendarBottomView.vue'
  export default {
  components: {
    'calendar-top-view': calendarTopView,
    'calendar-bottom-view': calendarBottomView
  }
}
</script>

在calendar-bottom-view组件中，我需要使用vue-router来帮助切换到子组件：calendarView和agendaView。所以我决定在我的calendar-bottom-vue组件中添加vue-router，代码如下所示：

<template>
  <div id='mainRightDiv'>
    <div id='calendarToolboxDiv'>
      <a v-link='{ path: "/calenarView"}'></a>
      <a v-link='{ path: "/agendaView"}'></a>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/javascript">
  import Vue from 'vue'
  import calendarView from './calendarView.vue'
  import agendaView from './agendaView.vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  let App = Vue.extend({})
  let router = new VueRouter()
  router.map({
    '/calendarView': {
      component: calendarView
    },
    '/agendaView': {
      component: agendaView
    }
  })
  export default {
    ready: function () {
      router.go({ path: '/calendarView'})
    }
  }
</script>

我打算做的是让路由器在初始化组件时首先渲染calendarView。但是当我运行这个页面时，我收到了像

这样的错误消息

“路由器视图＆gt;只能在启用路由器的应用程序中使用。'

我检查了vue-router的官方规范，并在其演示代码中找到，vue-router用于演示应用程序的条目js，未在任何子组件中找到任何用途。

所以我想知道，如何在我的一个子组件中使用vue-router而不是root？

Answer 1

我过去+3个月一直在与Vue.js合作，但从未见过一个使用让的教程或文档。我会写，好像你没有使用ES6。您还应该说明使用哪个（如果有）模块捆绑器（WebPack，Browserify）以及 Gulp ，因为您似乎正在尝试使用Vueify。如果没有其中一个，您就无法读取.vue个文件。

假设您将Browserify与Vueify一起使用，则创建.js文件，该文件应具有以下结构：

var Vue = require('vue');
var Router = require('vue-router');
Vue.use(Router);
Vue.config.debug = true;
//any other npm packages

import Alert from './components/Alert.vue';
import SubVue1 from './pages/Subvue1.vue';
import SubVue2 from './pages/Subvue2.vue';
import Bar from './pages/Bar.vue';
import Baz from './pages/Baz.vue';

var App = Vue.extend({
    data: function () {
        return {
            //any ViewModel data
        }
    },
    components: {Alert}
});

var router = new Router();
router.map({
    // Not found handler
    '*': {
        component: {
            template: '<div class="text-align:center">' +
            '<h1>Not Found</h1>' +
            '</div>'
        }
    },
    '/sub1': {
        name: 'subvue1',
        component: SubVue1
    },
    '/sub2': {
        name: 'subvue2',
        component: SubVue2
        // add a subRoutes map under /foo
        subRoutes: {
             '/bar': {
               // Bar will be rendered inside Foo's <router-view>
               // when /foo/bar is matched
               component: Bar
             },
             '/baz': {
                // Same for Baz, but only when /foo/baz is matched
                component: Baz
             }
        }
   }
});

router.start(App, 'body'); // #app,.start -as you wish

请注意，我在根父.js文件中使用了vue-router。因此，当您输入 / sub1 时，则会加载Subvue1.vue。但是，所有.vue个文件都必须通过Gulp捆绑在一个.js文件中。注意子路由（calendarView和agendaView开关）。每个SubVue，Bar，Baz都应该有结构：

<template>
  <router-view><router-view> //For Subvue2 subroute
</template>
<script>
    export default {
        props: ['parentProperty'],
        data: function () {// data}
        methods:{}
    }
<style></style>

我使用npm下载Vue，Vue-Router等。但您可以从项目资源中导入它们。我并不打算聪明，我试图根据您的代码中的假设提供帮助。阅读Vue Router文档以获取更多信息。

如何仅在子组件中使用vue-router？

1 个答案: