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