需求:
1、实现侧边栏的无限循环
2、实现面包屑的路由跳转
3、实现侧边栏和面包屑的互动
前提:
1、vue2项目创建完成
2、安装element ui 组件库
一、创建侧边栏
目录结构如下:
1、创建路由(router/index.js)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
import Main from '@/layout/components/AppMain.vue'
export const constantRoutes = [
{
path: '/',
component: Layout,
redirect: '/home',
meta:{
title:'主页'},
children: [
{
path: 'home',
name: 'Home',
component: () => import('@/views/dashboard/index.vue'),
meta:{
title:'home',
},
}]
},
{
path:'/park',
name:'Park',
component: Layout,
redirect: '/park/park_add/park_add_edit1',
meta:{
title:'园区'},
children:[
{
path:'park_add',
name:'ParkAdd',
component: Main,
redirect: '/park/park_add/park_add_edit1',
meta:{
title:'园区编辑',
},
children:[
{
path:'park_add_edit1',
name:'ParkAddEdit1',
component:()=>import('@/views/park/index.vue'),
meta:{
title:'园区-编辑1'},
},
{
path:'park_add_edit2',
name:'ParkAddEdit2',
component:()=>import('@/views/park/parkAdd.vue'),
meta:{
title:'园区-编辑2'},
}
]
},
{
path:'park_detail',
name:'ParkDetail',
component:()=>import('@/views/park/packDetail.vue'),
meta:{
title:'园区详情',
}
}
]
},
{
path:'/demo',
name:'Demo',
component: Layout,
redirect: '/demo/demo_detail',
// hidden:true,
meta:{
title:'测试'},
children:[
{
path:'demo_detail',
name:'DemoDetail',
component: Layout,
component:()=>import('@/views/Demo/index.vue'),
meta:{
title:'测试详情'},
}
]
}
]
const createRouter = () => new Router({
scrollBehavior: () => ({
y: 0 }),