vue嵌套路由

 

例如再home页面中，希望通过home/news和home/message来访问一些东西

一个路径映射一个组件，这两个路径也会分别渲染两个组件

 

 

1.router-->index.js路由配置页面：

{　　
　　path:'/home',
　  component:() => import('@/views/home'),
    children:[
　　　　// 默认显示新闻
      {
          path:'news',
          redirect:() =>import('@/views/component/news')
      },
      {
          path:'news',
          component:() =>import('@/views/component/news')
      },

      {
          path:'message',
          component:() =>import('@/views/component/message')
      }
   ]
} 

 

2.首页home.vue页面

<template>
    <div>
        <h2>首页</h2>
        <router-link to="/home/news">新闻</router-link>
        <router-link to="/home/mesage">消息</router-link>
　　　// router-view决定渲染好的组件放到什么位置--占位
　　　<router-view></router-view>
    </div>
</template>