vue点击左边导航,右边出现页面步骤

vue点击左边导航,右边出现页面   步骤

vue点击左边导航,右边出现页面步骤_第1张图片

一定要import不然会出错

vue点击左边导航,右边出现页面步骤_第2张图片

index.js Course作为Homeview子路由

Homeview加入

vue点击左边导航,右边出现页面步骤_第3张图片

vue点击左边导航,右边出现页面步骤_第4张图片

点击跳转

vue点击左边导航,右边出现页面步骤_第5张图片

vue点击左边导航,右边出现页面步骤_第6张图片

父Homeview中有RouterView(路由出口,跳转至相应路径)和RouterLink(点击跳转)

跳转的页面都为Homeview子

只有为el-menu-item标签时,index才会和default-active配对生效高亮

vue点击左边导航,右边出现页面步骤_第7张图片vue点击左边导航,右边出现页面步骤_第8张图片

:default-active="$route.path"        

:绑定   

$route.path浏览器当前正在访问的路由,格式  /xxx

点击导航栏出现对应页面时,当前访问页面导航栏高亮 

在el-menu-item标签写index="/xxx"     el-menu:default-active="$route.path"     vue点击左边导航,右边出现页面步骤_第9张图片

router  可点击 好像是绑定切换路由

vue点击左边导航,右边出现页面步骤_第10张图片

你可能感兴趣的:(前端)