当前位置: 首页 > Web前端 > vue.js

vue实现头部导航

时间:2023-03-31 17:06:07 vue.js

.top-nav{display:flex;背景:#fff;li{列表样式:无;弹性:1;文本对齐:居中;填充顶部:10px;a{文字装饰:无;显示:块;填充底部:8px;}。积极的{border-bottom:2pxsolid#ff0000;}}}在views文件下创建Layout.vue,Mine.vue、Search.vue、Topic.vue组件配置路由,Layout组件为入口文件,其他组件配置为Layout组件的子组件。点击高亮-->linkActiveClass:"active",上面代码constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,linkActiveClass:"active",//配置点击高亮路由:[{path:"/",name:"Layout",component:Layout,children:[{path:'/',name:'Home',component:Home},{path:'mine',name:'mine',component:Mine},{path:'search',name:'search',component:Search},{path:'topic',name:'topic',component:Topic}]}]})只有一个路由App.vue中留exit,删除App中的所有样式配置Layout组件为显示路由.top-nav{display:flex;背景:#fff;li{列表样式:无;弹性:1;文本对齐:居中;填充顶部:10px;a{文字装饰:无;显示:块;填充底部:8px;}。积极的{border-bottom:2pxsolid#ff0000;}}}