路由的嵌套

home路径下配置一个news和message子路径

import Vue from 'vue'
import VueRouter from 'vue-router'
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [
    {
     path:'/',
     //重定向到home
     redirect: '/home'
    },
    {
     path:'/home',
     component: Home,
     children: [
        {
            path: '',//设置嵌套路由默认路径
            redirect: 'message'
        },
        {
            path: 'news',//子组件不能加/
            component: HomeNews
        },
        {
            path: 'message',
            component: HomeMessage
        }
     ]
    },
    {
        path:'/about',
        component: About    
    },
    {
        path: '/user/:userName',
        component: User
    }
]

const router = new VueRouter({
    mode: 'history',//使用history模式，去除url中的#符号（hash模式）
    //配置路由和组件之间的应用关系
    routes
})

//3.将router对象传入到vue实例
export default router

　　

创建HomeNews和HomeMessage组件

 

 

 

 

Home组件中使用<router-link>和<router-view>