嵌套路由、导航路由、动态路由

1.嵌套路由

{
        path: '/home',
        name: 'home',
        component: Home,
        children: [{
            path: 'HomeFirst',
            name:'first',
            component: SonFirst
        }, {
            path: 'HomeSecond',
            name:'second',
            component: SonSecond
        },
        {
            path:'HomeThree',
            name:'three',
            component:SonThree
        },
        // 当跳转路径没有时
        {
            path:'*',
            redirect:'/'
        }
    ]
    },

在里面嵌套children数组配置项，里面就是路由里面的子路由

//引入Vue
import Vue from "vue";
//引入views文件夹下的两个路由跳转的vue的文件
// import About from '../views/About.vue';
import Home from '../views/Home.vue';
//引入路由对象
import VueRouter from 'vue-router';
//引入路由子组件
import SonFirst from '../views/HomeSonFirst.vue'
import SonSecond from '../views/HomeSonSecond.vue'
import SonThree from '../views/HomeSonThree.vue'
//使用路由
Vue.use(VueRouter);
//创建路由器
const routes = [
    //在路由对象里面注册引入的对应的状态框组件
    //懒加载，页面切换加载组件
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/About.vue')
    },
    {
        path: '/home',
        name: 'home',
        component: Home,
        children: [{
            path: 'HomeFirst',
            name:'first',
            component: SonFir