Recently, when writing a background management system, I used Vue + Element to navigate to the sidebar and had no problem with the route jump. However, the page refresh found that the selected state (highlighted) of the sidebar was missing. In fact, the problem was very simple.
Such as:
<template> <el-menu class="el-menu-vertical-demo" :default-active="$route.path" router > <el-menu-item index="/home"> <i Class ="iconfont icon-order"></ I >< span slot="title"> home </span> </el-menu-item> <el-menu-item Index ="/Goods/GoodsManagement"> < I class="iconfont icon-shangpin"></ I >< span slot="title"> </span> </el-menu-item> </el-menu> </template>Copy the code*** Enable the router mode, which will redirect the route with index as path when activating the navigation **, so the index of el-menu-item is set to path, and default-Active is the index of the current activation menu. Bind **default-active to $route.path, ** so that highlighting is not lost even if refreshed.