vue.js - vue-router 2.0 + Vue2.0 (命名视图)配置问题？

问题描述

问 题

需要使用vue-router 2.0 按照官方配置如下：
但默认显示的组件并不是Page1,而是Page1和Page2....,求解？
初学Vuejs

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Page1 from './p1.vue';
import Page2 from './p2.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Page1,
        a: Page2
      }
    }
  ]
});

//下面这个不知道对不对
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


//App.vue 如下
<template>
  <div id="app">
    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
  </div>
</template>

解决方案

文档说的是，同时（同级）展示多个视图。如果没有设置名字，那名字默认为default，这个意思，不是默认显示 default这个组件
path: '/',

  components: {
    default: Page1,
    a: Page2
  }
}

<div id="app">

<!-- 这里的组件都会被显示-->
<router-view class="view one" ***name="default"***></router-view>
<router-view class="view two" name="a"></router-view>

</div>

这篇关于vue.js - vue-router 2.0 + Vue2.0 (命名视图)配置问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！