快捷導(dǎo)航

vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例

更新時(shí)間：2022年06月08日 11:38:27 作者：愛(ài)吃紅薯粉

這篇文章主要為大家介紹了vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

容器布局

將App.vue中的HelloWorld相關(guān)內(nèi)容注釋或刪除掉，然后將element-plus提供的布局復(fù)制過(guò)來(lái)放在App.vue中

該布局為左側(cè)菜單欄，右邊內(nèi)容區(qū)，右上為頂部，典型的管理后臺(tái)風(fēng)格

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <Menu></Menu>
      </el-aside>
      <el-container>
        <el-header height="20px">Header</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
<!-- 
  <div>
      <p>
        <router-link to="/home">Go to Home</router-link>
        

        <router-link to="/about">Go to about</router-link>
        <router-view></router-view>
      </p>
    </div>
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Menu from './components/Menu.vue'
export default {
  name: 'App',
  components: {
    // HelloWorld
    Menu
  }
}
</script>

上述代碼中有Menu.vue組件，需要新建，稍后再添加內(nèi)容

路由定義

在src目錄新建routes.js文件，將路由列表寫(xiě)入，方便其它組件使用

const routes = [
    { path: "/home", name: 'home', label: '首頁(yè)', component: () => import('./components/home.vue'), },
    { path: "/about", name: 'about', label: '關(guān)于', component: () => import('./components/about.vue'), },
]
export default routes

內(nèi)容沒(méi)有什么變化，就是將router.js 中的routes抽出來(lái)，單獨(dú)寫(xiě)一個(gè)文件

router.js引入并使用routes

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
    history: createWebHashHistory(),
    routes: routes,
})
export default router

左側(cè)菜單

在components目錄中新建Menu.vue頁(yè)面，然后將element-plus中菜單組件中Side bar 復(fù)制過(guò)來(lái)。

<template>
  <el-row class="tac">
    <el-col :span="24">
      <h5 class="mb-2">Default colors</h5>
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>Navigator One</span>
          </template>
          <router-link v-for="(item, index) in routes" :to="{ name: item.name }" :key="item.name">
            <el-menu-item :index="index">
              <span v-text="item.label"></span>
            </el-menu-item>
          </router-link>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon>
            <icon-menu />
          </el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon>
            <document />
          </el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <setting />
          </el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import routes from '../routes'
export default {
  name: 'Menu',
  components: { Document, IconMenu,Location, Setting },
  data() {
    return {
      routes: routes,
    }
  },
  methods: {
    handleOpen() {
      console.log("111")
    },
    handleClose() {
      console.log("222")
    },
  }
}
</script>

@element-plus/icons-vue 此包需要安裝(npm install @element-plus/icons-vue)

element-plus官網(wǎng)中的例子都是ts+setup語(yǔ)法寫(xiě)的，這里我們改成js+響應(yīng)式語(yǔ)法

列寬改成:span="24"或更大值，列寬太小會(huì)發(fā)現(xiàn)灰線在字體中間

引入定義的路由列表routes.js,將內(nèi)容循環(huán)到 router-link中

運(yùn)行效果如下

結(jié)語(yǔ):

后續(xù)加路由直接加到routes.js既可，簡(jiǎn)單的左側(cè)菜單，右側(cè)內(nèi)容區(qū)就實(shí)現(xiàn)了，以上就是vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于vue3容器布局導(dǎo)航路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: