Vue 嵌套路由

第一步：News.vue

  
    News
    
    Details
       
  


  div{
    background-color: aqua;
  }

第二步：Details.vue

  
    Details
  


  div{
    text-align: center;
    font-size: 38px;
    color: sienna;
  }

第三步：router目录下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// 将Vue挂载到Router中，接下来就可以使用Router了
Vue.use(VueRouter)

const routes = [{
  path: '/news',
  component: () => import('../views/News.vue'), // 懒加载
  children: [{
    path: '/details',
    component: () => import('../views/Details') // 懒加载
  }]
}]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

效果：

• News页面：

• 单击Details