学习vue遇到的第二个问题(element 导航栏)

先去element.ui 导入一个容器

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
</style>

 

接下来去element 找一个导航栏的例子，我这边就找下面的了，然后我这边做了一下修改

<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-menu-item index="2">消息中心</el-menu-item>
          <el-menu-item index="3">订单管理</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>
<script>
export default {
   data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
};
</script>
<style lang="less" scoped>
.el-container{
  height: 100%;
}
</style>

效果如下：

 

 

接下来创建多个页面，component下创建3个组件，d1.vue,d2.vue,d3.vue

接下来呢我们想要让界面一打开就跳转到d1界面，那么就是要重定向。思路：需要在main的界面中放一个路由的占位符，然后将d1这个页面设置为demo的子路由位置

一.

1.将这3个组件加入到路由中

2. 在demo的路由中新增一个children属性，在数组中加入放入子路由的地址，保存。接下来重定向到d1

3.接下来在demo的主题位置去放入一个路由占位符

4.打开网页，从定向到了d1

二.

把菜单改成路由链接

1.查看api中 router属性，是用来开启路由模式的，那么在代码中把这个属性加上

 

此时去点击菜单就进行了跳转，比如说点击消息中心，就跳转到了http://localhost:8080/#/2

这个2，就是当前页面中索引的index值

 

2.开启了路由模式，那么就让每一个index指引到对应的path上去，修改完之后就点击菜单栏就会跳转到响应的地址

3.现在就是要跳转到对应的地址，展示出对映的组件，那么就是在demo路由下把其他的子路由添加进去

这个时候就完成了菜单栏对应的组件了。