Vue3实现简约型侧边栏的示例代码.docxVIP

第

Vue3实现简约型侧边栏的示例代码

目录1、首先配置好路由地址2、然后实现页面入口3、然后实现AAAAAA和BBBBBB页面有时遇到一些需求，需要实现左边侧边栏为父级菜单，右侧内容区的顶部为子级菜单，以及其底部为子级菜单对应的模块内容。

如此，简单实现如下：

1、首先配置好路由地址

【如：/src/router/index.ts】

import{createRouter,createWebHashHistory,RouteRecordRaw}fromvue-router

constroutes:ArrayRouteRecordRaw=[

path:/,

redirect:/xxxxxx

path:/xxxxxx,

name:帅龍之龍,

component:()=import(@/views/XXXXXX/index.vue),

children:[

path:/xxxxxx/aaaaaa,

name:赤龍神帝,

components:{AAAAAA:()=import(@/views/XXXXXX/AAAAAA/index.vue)},

children:[]

path:/xxxxxx/bbbbbb,

name:待定栏目,

components:{BBBBBB:()=import(@/views/XXXXXX/BBBBBB/index.vue)},

children:[],

constrouter=createRouter({

history:createWebHashHistory(),

routes

exportdefaultrouter

2、然后实现页面入口

【如：/src/views/XXXXXX/index.vue】

template

div

div

div:class=activePage==AAAAAAindexnavbar-active:@click=handleNavbarItemClick(AAAAAA)

span赤龍神帝/span

/div

div:class=activePage==BBBBBBindexnavbar-active:@click=handleNavbarItemClick(BBBBBB)

span待定栏目/span

/div

/div

div

router-viewname=AAAAAAv-if=activePage==AAAAAA/

router-viewname=BBBBBBv-if=activePage==BBBBBB/

/div

/div

/template

script

exportdefault{

data(){

return{

//当前激活的页面

activePage:,

watch:{

created(){

this.init()

mounted(){

//设置页面标题

document.title=帅龍之龍

methods:{

*获取初始化参数

asyncinit(){

this.activePage=AAAAAA

constquery=this.$route.query

this.handleMatchRouter(this.activePage)

*激活页面句柄

handleActivePageChange(activePage){

//点击el-tab页面时，将this.$route.query置为{}

this.$route.query={}

this.handleMatchRouter(activePage)

*激活页面句柄

handleMatchRouter(activePage){

constpath=this.$route.path

constb=path.toLowerCase().includes(activePage.toLowerCase())

if(activePage==AAAAAA){

if(!b){

this.$router.push({

path: