您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue3容器布局和導(dǎo)航路由如何實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
將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
在components目錄中新建Menu.vue頁(yè)面,然后將element-plus中菜單組件中Side bar 復(fù)制過(guò)來(lái)。
<template> <el-row class="tac"> <el-col :span="24"> <h6 class="mb-2">Default colors</h6> <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)行效果如下
以上就是“vue3容器布局和導(dǎo)航路由如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。