虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(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'),