Vue教程14：配置子路由

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chencl1986/article/details/85041106

示例代码请访问我的GitHub：
https://github.com/chencl1986/vue-tutorial

添加子路由

在/src/components/news.js文件中配置子路由，之后将子路由配置赋值给’/news’路由的children属性中。

编译后访问路径’/news/1’可以看到效果。

子路由配置：

代码示例：/lesson14/src/components/news.js

export const router = [
  {
    path: '1',
    name: 'news1',
    components: {
      news_header: NewsHeader,
      default: News1
    }
  },
  {
    path: '2',
    name: 'news2',
    components: {
      news_header: NewsHeader,
      default: News2
    }
  }
]

将配置赋值给children属性：

代码示例：/lesson14/src/router.js

import News, { router as news_router } from './components/news';

export default new VueRouter({
  routes: [
    {
      path: '/news',
      name: 'news',
      components: {
        header: Header,
        default: News
      },
      children: news_router
    }
  ]
})