浅谈vue 二级路由嵌套和二级路由高亮问题

这篇文章主要介绍了浅谈vue 二级路由嵌套和二级路由高亮问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

第一层路由我写在app.vue里面。如图所示:

footer.vue:

二级路由是这样:

index.js里面的配置:

效果图:

效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示:

在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示:

补充知识:vue - 子路由-路由嵌套

描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加来展现子页面信息,相当于嵌入iframe。

Home.vue

 

One.vue /Two.vue

 

index.js

 import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import One from '@/components/One' import Two from '@/components/Two' Vue.use(Router) export default new Router({ routes: [ { path: '/', // 默认页面重定向到主页 redirect: '/home' }, { path: '/home', // 主页路由 name: 'Home', component: Home, children:[ // 嵌套子路由 { path:'one', // 子页面1 component:One }, { path:'two', // 子页面2 component:Two }, ] } ] }) 

以上就是浅谈vue 二级路由嵌套和二级路由高亮问题的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程