& lt; router-view:关键=発ey"祝辞& lt;/router-view>

是用来渲染通过路由映射过来的组件,当路径更改时,& lt; router-view>中的内容也会发生更改

在js文件中使用计算来进行监听

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>