11.Vue 路由多视图

在Vue路由中可以使用多视图模式:

1.在 App.vue中添加多视图:


2.在router/index.js中配置多视图规则

  //导入路由页面
  import RouterIndex from '../page/router/routerIndex'
  import RouterA from '../page/router/routerA'
  import RouterB form '../page/router/routerB'
  ....
    // 导入路由、使用路由省略....
  ....
  export default new Router({
     routers: [
        {
          path: '/views',
          components: {
              header: RouterIndex ,
              default: RouterA ,
              footer: RouterB 
          }
        },
     ]
  });

  routers中配置多路由视图使用components,注意这里多了个s,如果是component则表示一个

你可能感兴趣的:(11.Vue 路由多视图)