vue路由切換
阿新 • • 發佈:2018-11-15
看了 好多關於 vue 路由切換的文章 都不太理想 , 自己花了點時間 研究下vue的路由切換僅供大家參考,這個案例使用element-ui+vue-router實現
整體效果:
第一步
<!-- 在 components 目錄下建立建立 routerTab 資料夾 --> <!-- 在 routerTab 目錄下建立 A.vue,B.vue,C.vue 三個元件 --> <!-- 在 routerTab 目錄下建立 index.vue --> <!-- 在 routerTab 目錄下建立 header.vue --> <!-- 在 routerTab 目錄下建立 aside.vue -->
目錄結構:
以下是 A.vue,B.vue,C.vue,header.vue 元件
<template>
<div>
A 元件
</div>
</template>
<script>
export default {
name:"AComponent"
}
</script>
<style>
</style>
<template> <div> B 元件 </div> </template> <script> export default { name:"BComponent" } </script> <style> </style>
<template>
<div>
C 元件
</div>
</template>
<script>
export default {
name:"CComponent"
}
</script>
<style>
</style>
<template> <h1 style="text-align:center"> 頭部元件 </h1> </template> <script> export default { name:'header' } </script> <style> </style>
第二步: 配置路由 , 在 router/index.js 新增以下程式碼
{
path: '/index',// 注意 / 代表根目錄
name: 'index',
component: resolve => require(['@/components/routerTab/index.vue'],resolve), //懶載入元件
children:[
{
path:'aaa', // A 元件
component: resolve => require(['@/components/routerTab/A.vue'], resolve)
},
{
path: 'bbb', // B 元件
component: resolve => require(['@/components/routerTab/B.vue'],resolve)
},
{
path: 'ccc', // C 元件
component: resolve => require(['@/components/routerTab/C.vue'],resolve)
}
]
}
第三步: 設定路由跳轉
<template>
<el-menu
default-active="2"
:router="true">
<!-- :router="true" 表示 啟用 路由 所以 el-menu-item 中的 index 表示路由要切換到的頁面 -->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
<span>側邊欄</span>
</template>
<!-- 這裡 的 index 代表 要去的路由 -->
<el-menu-item index="/index/aaa">A元件</el-menu-item>
<el-menu-item index="/index/bbb">B元件</el-menu-item>
<el-menu-item index="/index/ccc">C元件</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
name:'aside'
}
</script>
<style></style>
第四步: 將所有元件整合 實現 點選時 載入對應元件
<template>
<!-- 這裡使用 element-ui 佈局 -->
<el-container>
<!-- 頭部 -->
<el-header>
<Vheader></Vheader>
</el-header>
<el-container>
<!-- 側邊欄 -->
<el-aside width="200px">
<Vaside></Vaside>
</el-aside>
<el-main>
<!-- 主體 也是 點選側邊欄中選項 載入對應元件 -->
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script>
// 引入 頭部元件 和 側邊欄元件
import Vheader from "@/components/routerTab/header";
import Vaside from "@/components/routerTab/aside";
export default {
name: 'index',
components: {
Vheader,
Vaside
},
}
</script>
<style>
</style>