当前位置 : 主页 > 网页制作 > HTTP/TCP >

Element-UI 写后台【三】 让上面全部联通动起来

来源:互联网 收集:自由互联 发布时间:2021-06-16
1、定义相关组件的路由 2、在main.vue 使用router-view/router-view进行渲染 3、在Aside.vue中clickMenu,使用编程式导航进行跳转 methods: { clickMenu(item) { this .$router.push({name:item.name}) this .$store.commit

1、定义相关组件的路由

2、 在main.vue 使用<router-view></router-view>进行渲染

3、在Aside.vue中clickMenu,使用编程式导航进行跳转

methods: {
            clickMenu(item) {
                this.$router.push({name:item.name})
                this.$store.commit(selectMenu, item)
            }
        },

4、Tab联通性,与上类似

5、Tab需要加一个点击函数,让点击进行路由跳转

      <el-tag
                :key="tag.name"
                v-for="tag in tags"
                closable
                :disable-transitions="false"
                :closeable="tag.name !== ‘home‘"
                @click=changeMenu(tag)
                @close="handleClose(tag)">
            {{tag.label}}
        </el-tag>
   changeMenu(item) {
                this.$router.push({name: item.name})
                //    调用VUEX的方法
                this.$store.commit(selectMenu, item)
            }

 

地址 : https://github.com/njp2645509660/element-ui-.git 

上一篇:drf三大认证
下一篇:POJ2100——尺取
网友评论