vuejs中路由的嵌套

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

在做Vue的项目当中,路由的嵌套是一个非常常见的操作，在我们网页界面当中的一些切换,跳转,或多或少都会用到

只要参与开发一些后台管理系统,那必然会用到嵌套路由,涉及到路由的传参等

先来看一个例子,需求,点击左侧边栏,显示一级导航,二级导航切换

01

路由的设置规则

一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理

前端路由:key是路径,value是组件

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

Vue.use(VueRouter);

// 实例化router对象,定义一些规则和配置
const router = new VueRouter({
    routers: [
        // 一级路由
        {
            path: '/',
            component: Layout,
            redirect: '/dashboard',
            children: [
                {
                 path: 'dashboard',
                 name: 'Dashboard',
                 component: () => import('@/views/dashboard/index'),
                 meta: { title: 'Dashboard', icon: 'dashboard' }
            }]
        },

        {
    path: '/fontend',     // 一级路由
    name: 'FontEnd',
    component: Layout,
    meta: {
          title: '前端',
          icon: 'nested',
    },
    redirect: '/fontend/html',
    children: [        // 子路由/二级路由
       {             
         path: '',
         name: 'font',
         redirect: '/fontend/html',
         hidden: true,
         component: () => import('@/views/fontend/index'),
        //  meta: {
        //   title: '前端',
        //   icon: 'nested',
        //  },
         children: [   // 二级路由下的子路由
            {
             path: 'html',
             name: 'Html',
             hidden: true,
             component: () => import('@/views/fontend/html.vue'),