el-menu 添加 :default-active=“this.$router.path” 和 router (default-active前面要有 “:” ) router.js文件下应该配置好路由路径。建议用路由懒加载方式 //import main from './pages/main.vue'Vue.use(Router); exportdefaultnewRouter({ mode:'history', routes:[ {path:'/',component: resolve =...
就是组件可以在自己的模板中调用自身，递归必须定义name属性（调用组件名和组件属性name名需一致才能实现递归）而且一定要有结束条件，否则组件就会被循环引用最终出现“max stack size exceeded”的错误。10 注意事项：1，刷新定位当前路由，需要在el-menu标签中定义:default-active="$route.path"，这样当你刷新路由时...
1).要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2).导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性...
在router.js里设置路由时,给相同导航高亮的路由设置相同的name属性,如图: 然后在menu组件上设置default-active的值为:$route.name,这样就可以实现刷新时导航栏选中当前页的问题。最后设置el-menu-item的index属性为router.js文件里跳转路由的name值,route属性为:路由的path,如图: 通过这样设置,就可以实现刷新页面时,...
<el-menu-item v-for="item in menuList" :index="item.route" :key="item.id">{{item.name}}</el-menu-item> </el-menu> ``` 4.在上面的示例代码中,menuList是从后端返回的菜单数据,根据menuList动态生成了菜单项和路由。 三、路由钩子 1.在el-menu中使用router还可以结合vue-router的路由钩子来...
格式functiongetRoute(item){// 路由基本格式letroute=Object.assign(item,{comp:item.component,// 路由的路径path:item.path,// 路由名name:item.menuName,// 路由的子路由children:item.children,icon:item.icon,});// 父级有子集处理 引入组件if(item.children){route.component=Layout route.redirect=item...
<el-menu ref="menu" mode="vertical" router :default-active="$route.path" :collapse-transition="false" :collapse="$store.state.dcp.sidebar.isCollapsed" @select="checkLink" > <menu-item v-for="route in filteredMenu" :key="route.path" :item-route="route" :base-path="route.path" /> ...
1.要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2.导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时...
在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router---或者router=true 在<el-submenu>中的index不可缺少,为必须值,不过此处的index仅为索引,用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可 在<el...
在主页面中,可以通过route对象的query属性来获取传递的参数。注意保证路由的定义和正确使用命名路由。 在接下来的部分,我们将分析子路由携带参数报错的原因,并提出相应的解决方案。 2.3报错的原因分析 在使用el-menu跳转子路由时携带参数时,可能会遇到报错的情况。以下是一些可能导致报错的原因分析: 1.参数传递方式错误...