Preface ： Under the current social background , People's needs are more personalized , Before, in order to liberate the complex native development state , The existing component library is far from meeting people's high-quality needs , In the past two days, developers have found some element UI Interactive defects , Of course, it is also some details that are easy to be careless , I hope I can help you
1.element Message Message tip
1. In the project Message References to components
// All components are introduced into the component library, which is easy to use
import ElementUI from "element-ui";
// Introduce on demand , The advantage is that the code is small
import { Message } from "element-ui";
// Global mount , Convenient this quote
Vue.prototype.$message = Message;
2.Message Problems with components
The page runtime code reports an error ：
element Component source code error location
3. You can probably see the problem here
Click to view the error location of your code , You can basically see the reason for the error report
Basic research summary ：Message Components can not be invoked when they are in use. null and undefined
In general, the location and causes of this problem ： Maybe you can pay more attention axios perhaps fetch The local reference of the returned result of the request , If there is Message Component exception prompt settings , However, the data returned by the backend is missing fields , Then there will be “undefined” The above error report .
2.element NavMenu Navigation menu
a. Official code logic ：
<el-menu :default-active="baseroute" class="vertical" @select="menuclick" :router="menurouter">
<el-menu-item :index="items.router" v-for="items in menu" :key="items.id">
<span slot="title">{{items.label}}</span>
</el-menu-item>
</el-menu>
b. Official API：
There's no problem with this component. It's perfect , The use is also very smooth , But the problem is :router="true" In this configuration , Did you find that this configuration item can't transfer parameters ,
c. Of course, we need to study and solve problems ：（ Preliminary solution ）
watch: {
"$route.path": function(newVal) {
//menu Is an array of menus
this.menu.forEach(item=>{
if(newVal==item.router){
this.$router.push({path:newVal ,query:{...this.routermsg}})
}
})
},
},
d. There's a problem again , Then when you click the currently highlighted menu （ Click twice on a menu ）,watch It can't be monitored （ The route is considered unchanged ）, The component will be router Defined index As path Route jump , That is, there is no function of routing parameters , Various errors and parameter errors will be reported on the page
e. In this case, code compatibility is improved later NavMenu Function of navigation menu parameter transmission ,
<script>
methods: {
menuclick(index,indexPath){
this.baseroute=index
this.$router.push({path:indexPath[0] ,query:{...this.routermsg}})
}
}
</script>
Compatible with parameter transfer function , that watch Monitoring is not needed , You can comment or delete
