1.导航栏为单独一个组件
在element-ui中引入导航栏的代码
！注意 内容一定要在template中，否则bug遇到很久
<template><div><!-- 页面布局 --><el-container><!-- 侧边栏 --><el-aside width="200px"><CommonAside /></el-aside><!-- 页面布局 右边 包括header 和main --><el-container><el-header>Header</el-header><el-main>Main<!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></el-main></el-container></el-container></div></template><script>import CommonAside from '@/components/CommonAside';export default {data() {return {}},components: {CommonAside}
}
</script><style>
</style>
2.在main.vue中引入CommonAside组件
注意：import一定要写在script中 否则无法引入成功，显示CommonAside not defined
<template><div><!-- 页面布局 --><el-container><!-- 侧边a栏 --><el-aside width="200px"><CommonAside /></el-aside><!-- 页面布局 右边 包括header 和main --><el-container><el-header>Header</el-header><el-main>Main<!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></el-main></el-container></el-container></div></template><script>import CommonAside from '@/components/CommonAside';export default {data() {return {}},components: {CommonAside}
}
</script><style>
</style>
3.路由中的路径，导航栏的main为母版，相当于，其他的页面都在该路径的子路径下，导航栏才能在每次页面的跳转时固定不动
import Vue from 'vue'
import Router from 'vue-router'//1.引入组件
import HelloWorld from '@/components/HelloWorld'import user from '../views/user.vue'
import home from '../views/home.vue'
import main from '../views/main.vue'import CommonAside from '../components/CommonAside'
Vue.use(Router)//2.定义路由，将路由与组件进行映射const routes = [//主路由{path: '/',name:main,component: main,children: [//子路由（不能带/，否则不显示）{path: 'user',name:user,component: user,},{path: 'home',name:home,component: home,},]},]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new Router({routes // (缩写) 相当于 routes: routes
})export default router
