Routing is indispensable in each project. Recently, I learned that vue-router and ElementUI are used in conjunction with the navigation bar. I encountered a problem during the learning process: after clicking the browser refresh, the page stays in its original position, but navigation is the first by default.
Since I didn't have a long time to contact the front-end, I was not very clear about the concept of routing. After writing it according to the document, I didn't know how to start. I asked my colleagues. My colleague's solution was to use vuex management, but I hadn't touched on vuex yet, so this problem was put on hold. I studied at home this weekend and accidentally until I could use $ to set the default navigation. However, there was no effect after setting. When I refreshed, the page still stayed in the original location, but no navigation was selected. After checking the information for a long time, I couldn't find the answer. Later, I compared it with an example online and found that
default-active="$"
You also need to add binding symbols before, as follows:
:default-active="$"
After setting this, you can change navigation and page simultaneously.
Please see the complete navigation code here:
<template>
<div >
<el-col :span="4">
<el-menu :default-active="$" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
theme="dark"
router>
<el-menu-item index="/upload_img">Image upload</el-menu-item>
<el-menu-item index="/upload_video">Video upload</el-menu-item>
<el-menu-item index="/https">Network request</el-menu-item>
<el-menu-item index="/other">other</el-menu-item>
</el-menu>
</el-col>
<router-view></router-view>
</div>
</template>
The above example of vue-router combined with ElementUI to implement navigation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.