vue +element實現點擊左側欄目切換路由

1.安裝router我就不貼代碼了，先看看咱們需要實現的功能，點擊左側側邊欄實現中間main的變化

 

 

2.在components文件下創建page1 和page2  內容隨便寫。為了方便，我貼一下代碼

     

 

 

 3.router目錄下的idnex.js 把這兩個路由加上

 

 

4.app.vue里面使用剛才的路由，為了你們方便，我直接上代碼    

 

 

 <el-container>

    <el-aside width="200px">

      <el-menu default-active="this.$route.path" router>

        <el-submenu index="">

          <template slot="title">

            <i class="el-icon-location"></i>

            <span>導航一</span>

          </template>

          <el-menu-item index="">導航1-1</el-menu-item>

        </el-submenu>

        <el-menu-item index="/page1">

          <i class="el-icon-document"></i>

          <span slot="title">導航三</span>

        </el-menu-item>

        <el-menu-item index="/page2">

          <i class="el-icon-setting"></i>

        <span slot="title">導航四</span>

        </el-menu-item>

      </el-menu>

    </el-aside>

    <el-main>

      <router-view></router-view>  

    </el-main>

    </el-container>

好啦，這些完成之后，你就會發現，可以用了，哈哈