javascript - vue.js中使用router路由设置后children的component失效。

问题描述

问 题

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Apple from '@/components/apple';
import Banbana from '@/components/banbana';
import RedApple from '@/components/redapple';

Vue.use(Router);
export default new Router({
  mode: 'history',
  routes: [ //路由配置
    {
      path: '/',
      component: Hello
    },
    {
      path: '/apple',
      component: Apple,
      children: [
        {
          path: 'red',
          component: RedApple
        }
      ]

    },
    {
      path: '/banbana',
      component: Banbana
    }
  ]
})

以上代码中 8080/ 是输出组件Hello是正确的 ， 8080/apple 输入的是组件apple也是正确的 ， 但是输入8080/apple/red 的时候不会跳转到 path：'red'对应的子组件RedApple中。

用import RedApple from '../components/redapple'的方法在 components : {RedApple} 注册后在页面中使用 <RedApple></RedApple> 是可以直接输出 RedApple里面的内容的，而使用路由却不行，这是为什么呢？

本人刚刚开始学习vue.js不久... 求大佬们指点！谢谢大家！

解决方案

看这部分代码似乎没什么问题，但是路由组件是要渲染到<router-view>中的，Apple组件中必须也要有<router-view>

这篇关于javascript - vue.js中使用router路由设置后children的component失效。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！