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

Posted 2023-02-23

【中文标题】如何仅在子组件中使用 vue-router？

【英文标题】：How to use vue-router in child component only?

【发布时间】：2016-11-09 06:18:17

【问题描述】：

我是 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。但是当我运行这个页面时，我收到了类似

的错误消息

'router-view> 只能在支持路由器的应用内使用。'

我查看了vue-router的官方规范，在它的demo代码中发现，在demo app的入口js中使用了vue-router，在任何子组件中都没有发现任何用处。

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

【问题讨论】：

我发现动态组件足以满足我的需要。不需要Vue路由器。但我还是想知道如何使用 vue-router。

【参考方案1】：

假设您将 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。注意subroutes（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>

阅读Vue Router 文档了解更多信息。

【讨论】：

嗨，@Dandruff，我使用 webpack 作为捆绑包，并使用 vue-loader 加载我的 .vue 文件。在 babel 的帮助下，它与 ES6 完美配合。你上面说的和vue-router官方教程里的差不多，但是我不满意。

我没用过webpack，所以无法推荐其他解决方案。也从未在组件中尝试过路由器，但从逻辑上讲它应该可以工作，因为它基本上是 JS。

谢谢@Dandruff