网站建设说辞,施工企业研发资金投入情况说明,瑞安自适应网站建设,百度关键词排名推广非专业前端#xff0c;局限性较高#xff0c;有些问题看起来很小#xff0c;但是初次接触很棘手#xff0c;需要查找很多博客#xff0c;内容也很杂。以下只是过程中总结下来的#xff0c;要解决的就是标题中的三个问题。
这是我需要达成的效果。 1.第一个是进入导航菜单… 非专业前端局限性较高有些问题看起来很小但是初次接触很棘手需要查找很多博客内容也很杂。以下只是过程中总结下来的要解决的就是标题中的三个问题。
这是我需要达成的效果。 1.第一个是进入导航菜单切换局部页面。
(1)在index.js中配置路由的时候作为导航页的子级。 (2)vue页面router-view/他会根据当前地址栏的路径在el-main这个组件的位置上给你展示
相应的局部页面。 2.完成1之后我们可以看到这个页面的基本结构如下图。 需要继续解决一些问题问题一进入页面的时候默认展示“订阅管理”这个子级的内容。问题二在刷新的时候选中的菜单不会改变不会丢失。
对于问题一重定向。也就是在进入该页面之前重定向到某个子级。 第二个问题刷新之后保持不变就是让activeIndex始终指向当前地址栏这个路径。 3.贴代码
index.js:
export default new Router({routes: [{path: /,redirect: /login},{path: /login,name: login,component: Login},{path: /menu,component: Menu,redirect: /paper,children: [{path: /paper,component: Paper},{path: /user,component: User},{path: /order,component: MyOrder}]}]
})menu页面:
templatedivel-containerel-aside width200pxel-menu:default-activeactiveIndexclassel-menu-demoselecthandleSelectrouterstyleheight: 100vh;border: 1px solid #eee;margin: 0;border: 0;padding: 0;el-menu-item index/paperi classel-icon-notebook-2/ispan slottitle订阅管理/span/el-menu-itemel-menu-item index/useri classel-icon-user-solid/ispan slottitle个人信息管理/span/el-menu-itemel-menu-item index/orderi classel-icon-s-order/ispan slottitle订单管理/span/el-menu-item/el-menu/el-asideel-mainrouter-view//el-main/el-container/div
/template
script
export default {name: menu,data() {return {activeIndex: this.$route.path,}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},},
}
/script
