vue側邊欄導航,右側顯示對應內容
阿新 • • 發佈:2018-11-02
最終效果
點選下一個導航,上一個導航自動收回
實現程式碼
1.下載vue-router
npm install vue-router --save-dev
2.在main.js中引入
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) // 引入路由
3.在components中新建元件
3.1 agencySearch.vue元件 程式碼: <template> <div> 直屬下線代理查詢 </div> </template> 3.2 agencySet.vue元件 程式碼 <template> <div> 直屬下線代理設定 </div> </template> 3.3 financialIncome.vue元件 程式碼 <template> <div> 財務收益資料報表 </div> </template>
4.在router下的index.js中引入元件,搭配路由
//4.1引入元件 import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' // 主頁 import agencySearch from '@/components/agencySearch' // 直屬下線代理查詢 import agencySet from '@/components/agencySet' // 直屬下線代理設定 Vue.use(Router) //搭配路由 export default new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: [ { // 主頁 path: '/', component: Home, name: '代理事物', iconCls: 'el-icon-message', children: [{ path: '/agencySearch', component: agencySearch, name: '直屬下線代理查詢', hidden: true }, { path: '/agencySet', component: agencySet, name: '直屬下線代理設定' }] }, { // 主頁 path: '/', component: Home, name: '財務報表', iconCls: 'el-icon-menu', children: [{ path: '/financialIncome', component: financialIncome, name: '財務收益資料報表', hidden: true }] }] })
5.在主頁Home元件中搭配導航以及路由出口
在el-menu標籤中一定要有 unique-opened 和 router屬性,在el-menu-item中index屬性值等於在router下index.js中配好的路由名字
這個是從element官網擷取的
<el-row class="tac"> <el-col :span="24"> <el-menu default-active="1" class="el-menu-vertical-demo" unique-opened router> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i> <span>代理事務</span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="/agencySearch">直屬下線代理查詢</el-menu-item> <el-menu-item index="/agencySet">直屬下線代理設定</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span>財務報表</span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="/financialIncome">財務收益資料報表</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-col> </el-row>
路由出口-右側顯示部分
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
結語:因為是從寫好的程式碼中擷取的一部分,可能跑不起來,請見諒,我能理解的原理部分都寫在這裡啦。