码迷,mamicode.com
首页 > 其他好文 > 详细

Vue路由配置是否含底部导航栏

时间:2020-03-12 15:54:46      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:vue   direct   add   highlight   导航栏   http   rip   view   next   

let barRoute = {
  path: ‘/‘,
  component: () => import(‘../view/basicView‘),
  redirect: ‘/home‘,
  children: [ // 带底部导航
  ]
}
let routes = [
  barRoute,
  {
    name: ‘home‘,
    component: () => import(‘../view/home‘),
    meta: {
      title: ‘首页‘,
      hasBar: true
    }
  },
  {
    name: ‘login‘,
    component: () => import(‘../view/login‘),
    meta: {
      title: ‘登录‘
    }
  }
];

// add route path
routes.forEach(route => {
  route.path = route.path || ‘/‘ + (route.name || ‘‘);
  if(route.meta && route.meta.hasBar){
    barRoute.children.push(route)
  }
});
routes = routes.filter(route => {
  return !route.meta || !route.meta.hasBar
})
console.log(routes)
const router = new Router({ routes });

router.beforeEach((to, from, next) => {
  const title = to.meta && to.meta.title;
  if (title) {
    document.title = title;
  }
  next();
});
basicView.vue写入底部导航代码

 

有底部导航,则配置meta.hasBar=true即可

技术图片技术图片

 

Vue路由配置是否含底部导航栏

标签:vue   direct   add   highlight   导航栏   http   rip   view   next   

原文地址:https://www.cnblogs.com/vmumu/p/12469678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!