& lt; router-view:关键=発ey"祝辞& lt;/router-view> 引用> 是用来渲染通过路由映射过来的组件,当路径更改时,& lt; router-view>中的内容也会发生更改 在js文件中使用计算来进行监听 //每次让路由生成不同的值,用于重新加载组件,达到刷新数据的效果
计算:{
键(){
返回这个。美元route.name !==undefined& # 63;美元。route.name +新日期():。$ +新日期()
}
}, vue:路由菜单(元素和antd) 强> 在vue中使用UI框架中的菜单,给菜单如何添加路由呢?其中会出现路由样式的问题。请看下面两种UI方法。 注)使用框架的时候注入知道的吧.....防止有些人xxxx,我还是写一下。 & lt; template>
& lt; div类=癿enu祝辞
& lt; el-menu default-active=& # 39; activePath& # 39;
路由器
@open=& # 39; handleOpen& # 39;
@close=& # 39; handleClose& # 39;
background - color=& # 39; # 545 c64 # 39;
文本颜色=& # 39;# fff& # 39;
active-text-color=& # 39; # ffd04b& # 39;比;
& lt;模板v=皉outes路线,指数;比;
& lt; !——一级菜单——比;=& # 39;& lt; el-menu-item:关键指数# 39;v=& # 39;路线。孩子,,route.children。长度==1 & # 39;:指数=& # 39;route.path& # 39;比;
& lt;我:类=? # 39;el-icon & # 39;+ route.meta.icon"祝辞& lt;/i>
& lt; span {{route.meta.title}} & lt;/span>
& lt;/el-menu-item>
& lt; !——二级菜单——比;
& lt; el-submenu v=& # 39;路线。孩子,,route.children。长度比;1 & # 39;:关键=& # 39;指数# 39;:指数=& # 39;route.path& # 39;比;
& lt;模板槽=& # 39;标题# 39;比;
& lt;我:类=? # 39;el-icon & # 39;+ route.meta.icon"祝辞& lt;/i>
{{route.meta.title}}
& lt;/template>
& lt; el-menu-item-group v=& # 39;(项目、索引)route.children& # 39;比;=& # 39;& lt; el-menu-item:关键指数# 39;:指数=& # 39;解决(路线。路径,item.path) & # 39;比;
& lt;我:类=? # 39;el-icon & # 39;+ item.meta.icon"祝辞& lt;/i>
{{item.meta.title}}
& lt;/el-menu-item>
& lt;/el-menu-item-group>
& lt;/el-submenu>
& lt;/template>
& lt;/el-menu>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:& # 39;菜单# 39;
数据(){
返回{
activePath:这。router.path美元,
}
},
计算:{//计算属性:获取路由
路线(){
console.log(& # 39;测试# 39;,这一点。美元路由器)
console.log (& # 39; ddd # 39;, router.options.routes美元)。
返回这个。router.options.routes美元
},
},
方法:{
解决(p, i) {
返回“$ {p}/$ {}”
},
keyPath handleOpen(关键){
控制台。日志(关键,keyPath);
},
keyPath handleClose(关键){
控制台。日志(关键,keyPath);
}
},
}
& lt;/script>
& lt;风格lang=& # 39;少# 39;比;
.el-menu {
text-align:左;
}
& lt;/style> vue项目中如何实现刷新左侧菜单栏
|