學習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路由下把其他的子路由添加進去

這個時候就完成了菜單欄對應的組件了。